清除浮动及原理&BFC（块级格式化上下文）总结

清除浮动的方法：

1.clear样式：清除浮动之后，元素所在的行不允许有浮动元素；如果有浮动元素会自动换到下一行

clear：left/right/both;

2.父元素结束标签之前插入清除浮动的块级元素

.blankDiv{
    clear:both;
}

3.利用伪元素

父元素加上一个类名叫clearfix；在clearfix的最后，添加了一个after的伪元素，通过清除伪元素浮动，达到撑起父元素高度的目的。

.clearfix:after{
content:'.';
height:0;
display:block;
clear:both;
}

以上三种清除浮动的方法的原理都是通过撑起父元素的高度，从而将浮动影响内化

4.overflow清除浮动

给父元素添加overflow：auto/hidden...;(除了visible之外的属性都可以)，这样父元素的高度立刻就被撑起来

那么父元素是怎样被撑起来的呢？

块级格式化上下文（BFC）：它是一块区域，规定了内部块盒的渲染方式以及浮动相互之间的影响关系；

BFC特点：

1. BFC有自己的一套内部子元素渲染规则，不影响外部渲染，也不受外部渲染影响
2. 外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠
3. BFC在计算高度时，内部浮动元素的高度也要计算在内，即使BFC区域只有一个浮动元素，BFC的高度也不会发生塌陷，其高度大于等于浮动元素的高度
   
4. 当一个BFC区域是一个浮动盒子的兄弟节点时，BFC会首先在浮动元素旁边渲染，若宽度不够，则在下方渲染

构建BFC区域的方法

1. float的值不为none（left/right）
2. overflow的值不为visible（hidden/auto）
3. display的值为table-cell/table-caption/inline-block
4. position的值不为static或relative（absolute/fixed）

BFC的作用

1. 防止margin重叠：可以将两个元素放在不同的BFC中，就可以防止margin重叠（主要用于嵌套元素）
2. 在浮动问题中，防止产生塌陷（子浮动元素也参与高度计算）
3. 与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖

多栏布局（左右固定，中间自适应）

.left{ float:left; width:180px; }

.center{ overflow:hidden; height:150px; }

.right{ float:right; width:180px; }