對BFC規範的理解

1. 什麼是BFC

BFC（block formatting context）：塊級格式化上下文。
簡單來講它就是一種會影響元素與元素之間的位置、間距的屬性。

2. 如何觸發（建立）BFC

1. float：給元素添加浮動
   left right（除了none 之外 ）
2. overflow ：給元素添加overflow屬性
   hidden，auto，scroll（除了visible 之外）
3. display：給元素添加display屬性
   table-cell，table-caption，inline-block, flex, inline-flex
4. position：給元素添加定位
   absolute，fixed

3. BFC特性

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

4. BFC造成後出現的常見問題

1. margin重疊問題
2. 浮動相關問題

5. BFC能夠解決的問題

1. margin疊加的問題，要阻止margin重疊，只要將倆個元素別放在一個BFC中便可。
2. 對於左右佈局的元素，咱們能夠給右側的元素添加overflow:hidden;或者auto，左側的是float:left;
3. 能夠清除浮動，計算BFC高度，浮動元素不會撐開父元素的高度，咱們能夠讓父元素觸發BFC,即：使用overflow:hidden;