BFC
首先BFC的英文全稱Block Format Context，也就是塊級格式化上下文。
BFC特性
首先，我們大家都知道的BFC特性：
- 內部的元素會在垂直方向，從頂部一個接一個的放置
- Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
- 每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此；
-
BFC的區域不會與float box重疊。 - BFC就是頁面一個獨立的容器，容器裡面的元素不會影響到外面的元素，反之亦然。
- 計算BFC的高度時，浮動元素也會參與計算
建立BFC方法
下面也是大家都熟悉的建立BFC的方法
- 根元素
- float不為none
- overflow不為visible
- display為
table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最後一個為專門建立BFC的屬性 - position為
absolute,fixed
例項
例項1
從例項1可以看到特性1，內部元素會從頂部一個接一個的放置，並且屬於同一個BFC的兩個相鄰的margin會發生重疊。如何解決邊距重疊的問題呢？此時我們需要給元素套上一個父元素，將父元素變成BFC。
這樣便可以解決邊距重疊問題。
例項2
從例項2上可以看到，元素的外邊距會觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動元素髮生了重疊。
當右面元素觸發BFC的時候，不會與左面元素髮生重疊，見例項
例項3
當兩個子元素都進行浮動時，此時父元素的高度會消失，第六個特性，計算BFC的高度時，浮動元素也會參與計算，此時我們觸發父元素的BFC。例項
此時發現高度會重新被撐開，所以計算BFC的高度浮動元素也會參與計算