BFC(Block formatting context)直譯爲"塊級格式化上下文"。
BFC它是指一個獨立的塊級渲染區域，只有 Block-level BOX 參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
如何生成BFC
- 根元素
- 設置了一下屬性的元素
display:inline-block;
float:left | right;
overflow:hidden | auto | scroll;
position:absolute | fixed;
BFC屬性特性
- 內部的標籤會在垂直方向上一個接一個的放置
- 垂直方向上的距離由margin決定，屬於同一個BFC的兩個相鄰標籤的margin會發生重疊
- 每個標籤的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動標籤也是如此。
- BFC的區域不會與float的標籤區域重疊
- 計算BFC的高度時，浮動子標籤也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子標籤不會影響到外面標籤，反之亦然
BFC應用
- margin塌陷和合並問題
- 自適應佈局問題
- 防止文字環繞
- 清除浮動