文档流：文档中可显示的元素在排列时候的开始位置以及他们所占的区域
原因：页面元素不同，按照各自的特点去显示，在页面中所占的区域是不一样的
顺序：从上到下，从左到右
css浮动float
概念：使元素脱离文档流，按照指定的方向发生移动，遇到父级元素或者相邻的元素就会停下来
特征：1）块元素可以在一行显示
2）按照一个方向移动
3）行内元素支持宽高
4）脱离文档流(元素不在页面中占位置了)
注意：浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）
5）块元素的默认宽度（默认撑满一行）会改变（由内容撑开，也可以设置宽）
代码
1 .container div {
2 width: 100px;
3 height: 100px;
4 background: green;
5 float: left;
6 }<div class='container'>
<div></div>
<span>浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）
浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）浮动后跟的元素（没有浮动）的位置是从前面浮动的元素位置开始的
非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）
</span>结果：
6）父级高度塌陷（破坏性），子元素如果有浮动，父级高度不会自动撑开了
//css代码
.container {
border:2px solid red;
}
.container div {
width: 100px;
height: 100px;
/*float: left;*/
background: green;
}
//html代码
<div class='container'>
<div></div>
</div>
清除浮动
1） clear 元素的某个方向上不能有浮动元素
clear :left 元素的左边不能有浮动元素
right 元素的右边不能有浮动元素
both 元素的两边不能有浮动元素 （常用）
2）overflow:hidden
如果子级有定位（position）并且超出了父级的范围这样子级定位的内容就开不见了，就不能有这样命令了
3）空标签
空标签是没有内容的，但他用于清楚浮动，不符合行为、结构、样式相分离
<div class='container'>
<div class='box'></div>
<div style='clear:both;'></div>
</div>4）after伪类清除浮动，是目前主流方法
after 代表选择到的元素的内容的最后面（默认添加的内容是行内元素），配合content使用
content 设置的内容
CSS代码
.container {
border: 2px solid red;
}
.container .box {
width: 100px;
height: 100px;
float: left;
background: green;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}HTML代码
<div class='container clearfix'>
<div class='box '></div>
</div>执行结果
BFC Block Formatting Contexts 块级元素格式化上下文
决定了块级元素如何对它的内容进行布局，及与其他元素的关系与相互作用
关键词解释：块级元素：指的是父级（块级元素）
内容：子元素（块级元素）
其他元素：与内容级别的兄弟元素
相互作用：BFC里的元素与外面的元素不会发生影响
普通文档流的布局规则
1：浮动的元素不会被父级计算高度（父级高度塌陷）
2：非浮动元素会覆盖浮动元素的位置
3:margin会传递给父级
4:2个相邻的元素上下元素会重叠
BFC的布局规则
1：浮动的元素会被父级计算高度( 父级触发了BFC)
2: 非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
3：margin不会传递给父级（父级触发了BFC）
4:两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发BFC）
触发BFC的方式（以下任意一条就可以）
1：float的值不为null
2:overflow的值不为visible
3:display的值为table-cell,table-caption,inline-block
4:position的值不为static,relative
举几个栗子：
1：自适应两栏布局：
代码
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>页面显示：
注意：非浮动元素会覆盖浮动元素的位置，就是主区和左栏开始位置重叠了，解决办法，让非浮动元素触发BEC
.main {
overflow: hidden;
}触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块（父级）的宽度，和aside的宽度，自动变窄。效果如下
2：清除内部浮动
1 <style>
2 .par {
3 border: 5px solid #fcc;
4 width: 300px;
5 }
6
7 .child {
8 border: 5px solid #f66;
9 width:100px;
10 height: 100px;
11 float: left;
12 }
13 </style>
14 <body>
15 <div class="par">
16 <div class="child"></div>
17 <div class="child"></div>
18 </div>
19 </body>页面效果：
为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算
1 .par {
2 overflow: hidden;
3 }
3：防止页面margin重叠问题
1 <style>
2 p {
3 color: #f55;
4 background: #fcc;
5 width: 200px;
6 line-height: 100px;
7 text-align:center;
8 margin: 100px;
9 }
10 </style>
11 <body>
12 <p>Haha</p>
13 <p>Hehe</p>
14 </body>页面显示：
margin重叠问题造成了两个P之间的上下距离还是100
我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
代码：
1 <p>Haha</p> 2 <div style='overflow:hidden;'> 3 <p>Hehe</p> 4 </div
页面显示：
