BFC總結

    針對BFC，主要須要瞭解其觸發條件，具體深刻理解及使用還須要聯繫實際應用。初次學習BFC所作筆記，之後有更深認識會再進行補充。

BFC（block formatting context）塊格式化上下文
是Web頁面的可視化CSS渲染出的一部分，是塊級盒佈局出現的區域，也是浮動層元素進行交互的區域。

    1. BFC特性

    在頁面上有一個獨立隔離容器，容器內的元素和容器外的元素佈局不會相互影響。也能夠理解爲內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。
     一個塊格式化上下文包括建立它的元素內部全部內容，除了被包含於建立新的塊級格式化上下文的後代元素內的元素。（即不包括孫子元素）

     塊格式化上下文對於定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的佈局，而且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

 

    2. BFC觸發條件

1）根元素或其它包含它的元素

2）浮動元素 (元素的 float 不是 none)

3）絕對定位元素 (元素具備 position 爲 absolute 或 fixed，不爲relative和static)

4）內聯塊 (元素具備 display: inline-block)

5）表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)

6）表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)

7）具備overflow 且值不是 visible 的塊元素，（auto,scroll,hidden）

8）display: flow-root

9）column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。

 

    3. BFC自適應佈局優點：

1）自適應內容因爲封閉，更健壯，容錯性強。比方說，內部clear:both不會與兄弟float產生矛盾。而純流體佈局，clear:both會讓後面內容沒法和float元素在一個水平上，產生布局問題。

2）自適應內容自動填滿浮動覺得區域，無需關心浮動元素寬度，能夠整站大規模應用。而純流體佈局，須要大小不肯定的margin/padding等值撐開合適間距，沒法CSS組件化。

 

    4. 相似清除浮動的通用類語句：

加clearfix類

.clearfix {
  *zoom: 1;
}
.clearfix::after {
  content: ''; 
  display: table; 
  clear: both;
}

兩欄或多欄自適應佈局的通用類語句是（block水平標籤，需配合浮動）：

.cell {
  display: table-cell; 
  width: 9999px;
  *display: inline-block; 
  *width: auto;
}

    5. 文檔流 V.S. BFC

文檔流影響元素的排列順序

BFC影響元素的寬高計算規則

 

    6. BFC的應用場景

觸發BFC，實現清除浮動的效果，真正的清除浮動：同4

float + div：實現自適應佈局

爸爸和兒子，兒子上的margin會傳出去，加上BFC就傳不出去