BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
BFC的佈局規則
-
內部的Box會在垂直方向，一個接一個地放置。
-
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
-
每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
-
BFC的區域不會與float box重疊。
-
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
-
計算BFC的高度時，浮動元素也參與計算。
如何創建BFC
- float的值不是none；
- position的值不是static或者relative；
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex；
- overflow的值不是visible。 值得一提的是，body標籤下一級標籤會任務是同一BFC
BFC部分用途
- 避免margin重疊
- 自適應兩欄佈局
- 清楚浮動浮動