BFC模型淺識

Jmingzi發表於2017-11-14
模型

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

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。

一點總結：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'.

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

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

3.inline-block間隙的產生原因

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

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

解決辦法

4.BFC作用

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

相關文章