BFC模型淺識

本文多爲查資料整理，若有不到之處，請指正。

1.基本概念

BFC爲Block Formatting Context的簡寫，簡稱爲「塊級格式化上下文」，BFC爲瀏覽器渲染某一區域的機制，CSS2.1 中只有BFC和IFC, CSS3中還增長了GFC和FFC。

2.產生條件

• float的值不爲none。
• overflow的值爲auto,scroll或hidden。

  block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport)
  意思是：overflow的值爲auto,scroll或hidden，且這個屬性沒有傳播到視口，何爲傳播到視口？詳見3.2

• display的值爲table-cell, table-caption, inline-block中的任何一個。
• position的值不爲relative和static。

• CSS深刻理解流體特性和BFC特性下多欄自適應佈局
• 深刻理解盒子模型——CSS之BFC詳解

一點總結：display:table-cell; 是一個比較好用的屬性（ie8+），跟inline-block具備相同的效果。可是咱們知道，當元素inline-block後，相鄰元素之間會有空隙(準確的說法詳見3.3)，而table-cell不會。
另外table-cell的寬度永遠不會超過父元素的寬度。

3.關聯產生的疑問？

1.垂直margin摺疊

由於在bfc的介紹中（戳我查看），有這樣一段描述，從而產生了這樣的疑問，描述以下：

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

意思是：在bfc中，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。

那麼咱們在沒有bfc的狀況下垂直外邊距也是會摺疊的，這是爲什麼？什麼狀況下會產生？bfc裏的邊距合併和普通的邊距合併有什麼關係？

查了下資料，有贊前端的一篇解釋的很好，深刻理解CSS外邊距摺疊

2.overflow擴散到視口的解釋

咱們知道bfc模型裏的佈局不會影響到父元素之外的邊距和浮動，當在body上設置overflow:hidden後，並無達到這種效果。戳我查看問題描述demo

英文描述是：

user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

• w3c文檔描述
• What's the meaning of 「propagated to the viewport」 in the CSS spec?

意思是用戶不要在第一個body元素上設置overflow，而要設置在viewport上，也就是視口容器root element html元素。

言外之意就是，當使用具備擴散propagate屬性的時候，須要設置在viewport元素上，也就是說以html元素上的屬性爲準，propagate屬性有

• overflow
• background
• What's the meaning of 「propagated to the viewport」 in the CSS spec?

3.inline-block間隙的產生緣由

<div>
  <div style="display:inline-block;"></div>
  <div style="display:inline-block;"></div>
</div>複製代碼

英文單詞之間會有空格，而中文沒有，當將元素設爲inline-block後，具備inline的屬性，全部的空格、換行或回車都會被視爲一個空格佔位字符，因而就產生了。

解決辦法

• font-size: 0;
• letter-spacing: -3px; 相似
• word-spacing: -6px; 相似
• 去除inline-block元素間間距的N種方法

4.BFC做用

對於2欄自適應佈局，3欄自適應佈局很經常使用