從例子來看BFC

BFC

首先BFC的英文全稱Block Format Context，也就是塊級格式化上下文。

BFC特性

首先，咱們你們都知道的BFC特性：

1. 內部的元素會在垂直方向，從頂部一個接一個的放置
2. Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
3. 每一個元素的margin box的左邊，與容器塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此；
4. BFC的區域不會與float box重疊。
5. BFC就是頁面一個獨立的容器，容器裏面的元素不會影響到外面的元素，反之亦然。
6. 計算BFC的高度時，浮動元素也會參與計算

建立BFC方法

下面也是你們都熟悉的建立BFC的方法

1. 根元素
2. float不爲none
3. overflow不爲visible
4. display爲table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最後一個爲專門建立BFC的屬性
5. position爲absolute,fixed

實例

實例1

從實例1能夠看到特性1，內部元素會從頂部一個接一個的放置，而且屬於同一個BFC的兩個相鄰的margin會發生重疊。如何解決邊距重疊的問題呢？此時咱們須要給元素套上一個父元素，將父元素變成BFC。

實例

這樣即可以解決邊距重疊問題。

實例2

從實例2上能夠看到，元素的外邊距會觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動元素髮生了重疊。

當右面元素觸發BFC的時候，不會與左面元素髮生重疊，見實例

實例3

當兩個子元素都進行浮動時，此時父元素的高度會消失，第六個特性，計算BFC的高度時，浮動元素也會參與計算，此時咱們觸發父元素的BFC。實例

此時發現高度會從新被撐開，因此計算BFC的高度浮動元素也會參與計算