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