BFC總結

看風景就發表於2015-09-18

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