作者：zccst
概念：
BFC，在进行盒模型时，提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其他环境中的布局。
也就是说，如果一个元素符号了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响，是一个隔离了的独立容器。
在CSS3中，BFC叫FLOW ROOT。
形成BFC条件：
1，float不为none
2，overflow不为visible
3，display的值为table-cell, table-caption , inline-block之一
4，position的值不为 static 或 relative中的任何一个
常见作用
1，包含浮动元素
对父元素使用overflow:hidden/auto/scroll, float:left/right, display:inline-block可以闭合浮动。
使用display:table可以隐式触发table-cell/table-caption，来创建bfc
例子，使用overflow:hidden避免了外部div的高度塌陷，否则内部浮动元素脱离文档流，外部div相当于一个空标签，没有高度和宽度，上下边框重叠在一起。
注：IE6/7需要触发hasLayout闭合浮动
2，不被浮动元素覆盖
即float:left和display:inline-block可以在同一行，互相不重叠。
3，阻止父子元素的margin合并
详见另一个文章。简言之：
<div style="margin-top:20px"><div style="margin-top:20px"></div></div> //会合并，父级元素不是BFC
<div style="margin-top:20px;overflow:auto"><div style="margin-top:20px"></div></div> //不会合并，父级元素是BFC
注：ie6/7需要触发hasLayout。
我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true
- position: absolute
- float: left|right
- display: inline-block
- width: 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值
- zoom: 除 “normal” 外的任意值
- writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true
在IE6/7使用hasLayout
.floatfix{//IE6-7
*zoom:1;
}
.floatfix:after{//IE8及以上
content:"";
display:table;
clear:both;
}
结论：两种办法
1，利用clear清除浮动
2，使父容器形成BFC