BFC总结

1. BFC定义(非学术)

BFC是一块独立渲染区域，决定了其包裹的子元素的定位方式。

2.BFC形成条件

下列情况将创建一个块格式化上下文：

1.根元素
2.float为 left 或 right
3.overflow为 hidden|auto|scroll
4.display为 table-cell|table-caption|inline-block|flex|inline-flex
5.position为 absolute|fixed

3. BFC应用

a. 清除浮动(父元素形成BFC，可以包裹浮动元素，达到清除浮动的目的)

b. 解除margin折叠(同一个BFC内的块级元素会有margin折叠，将其中一个元素做成BFC或用BFC包裹可以解决margin折叠)

c. 自适应布局(BFC不与浮动元素重叠，可以建立两栏或三栏自适应布局)

 

详细可以参考：

http://www.cnblogs.com/dojo-lzz/p/3999013.html

http://www.cnblogs.com/heimanba/p/3774086.html

http://www.cnblogs.com/elcarim5efil/p/4745796.html?utm_source=tuicool