1. 布局

1.1 float属性

清除浮动：clear属性

1.2 position属性（定位）

position

可实现双列、三列布局

absolute

粘滞定位

positon：sticky

1.float

float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
如下图：

CSS_11——布局（简单记录）_网页布局

image.png

这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。

<style>
.content{
margin: 100px auto;
width: 300px;
    }
.box{
float: left;
    }
</style>

    <div class="content">
        <div class="box"><img src="./imgs/authority-employee.png" alt=""></div>
        <div class="text">CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表：外部样式表、内部样式表和内联样式。</div>
    </div>

‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
网页中最常见的布局如下：

CSS_11——布局（简单记录）_CSS3_02

网页常见布局.png

用float做

<style>
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
    }
.header{
height: 100px;
background-color: hotpink;
   }
.nav{
height: 100px;
line-height: 100px;
text-align: center;
   }
.nav li{
float: left;
width: 100px;
height: 100px;
margin-left: 20px;
background-color: yellowgreen;
   }
.main{
width: 1000px;
height: 500px;
margin: 0 auto;
   }
.article{
width: 800px;
height: 500px;
background-color:yellow; 
float: left;
   }
.aside{
width: 200px;
height: 500px;
background-color:skyblue; 
float: left;
   }
.footer{
height: 100px;
background-color: greenyellow;
   }
</style>



    <div class="header">

        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>

    </div>



    <div class="main">

        <div class="article"></div>



        <div class="aside"></div>


    </div>



    <div class="footer"></div>


比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。

2.position

position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。

<style>
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
    }
.header{
height: 100px;
background-color: hotpink;
   }
.nav{
height: 100px;
line-height: 100px;
text-align: center;
/*父元素用相对定位*/
position: relative;
   }
.nav li{
/*子元素用绝对定位*/
position: absolute;
width: 100px;
height: 100px;
background-color: yellowgreen;
   }
.nav li:nth-child(1){
left: 20px;
   }
.nav li:nth-child(2){
left: 140px;
   }
.nav li:nth-child(3){
left: 260px;
   }
.main{
width: 1000px;
height: 500px;
margin: 0 auto;
position: relative;
   }
.article{
width: 800px;
height: 500px;
background-color:yellow; 
   }
.aside{
width: 200px;
height: 500px;
background-color:skyblue; 
position: absolute;
top: 0;
right: 0;
   }
.footer{
height: 100px;
background-color: greenyellow;
   }
</style>



    <div class="header">

        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>

    </div>



    <div class="main">

        <div class="article"></div>



        <div class="aside"></div>


    </div>



    <div class="footer"></div>


同样的效果

CSS_11——布局（简单记录）_网页布局_03

image.png

不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。

3.flex（推荐）

flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
使用方法：
在父元素使用 display:flex;确定弹性作用的范围。
然后
justify-content：center（space-around，space-between等）；水平方向布局；
align-items:center(flex-start,flex-end等);垂直方向布局；

<style>
body,ul,li{
padding: 0;
margin: 0;
list-style: none;
    }
.header{
height: 100px;
background-color: hotpink;
   }
.nav{
height: 100px;
line-height: 100px;
text-align: center;
display: flex;
   }
.nav li{
/*子元素用绝对定位*/
width: 100px;
height: 100px;
margin-left: 20px;
background-color: yellowgreen;
   }
.main{
width: 1000px;
height: 500px;
margin: 0 auto;
display: flex;
   }
.article{
width: 800px;
height: 500px;
background-color:yellow; 
   }
.aside{
width: 200px;
height: 500px;
background-color:skyblue; 
   }
.footer{
height: 100px;
background-color: greenyellow;
   }
</style>



    <div class="header">

        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>

    </div>



    <div class="main">

        <div class="article"></div>



        <div class="aside"></div>


    </div>



    <div class="footer"></div>


2. z-index

一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值

Z-index：value 数值越大，级别越高，越显示在前

3. BFC

3.1 简介

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

3.2 BFC触发方式

  2. 根元素，即HTML标签
  3. 浮动元素：float值为​​left​​、​​right​​
  4. overflow值不为 visible，为 ​​auto​​、​​scroll​​、​​hidden​​
  5. display值为 ​​inline-block​​、​​table-cell​​、​​table-caption​​、​​table​​、​​inline-table​​、​​flex​​、​​inline-flex​​、​​grid​​、​​inline-grid​​
  6. 定位元素：position值为 ​​absolute​​、​​fixed​​

注意：display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

CSS_11——布局（简单记录）_网页布局_04

BFC可以实现容纳浮动元素、组织文本环绕

4. 参考