前端進階之什麼是BFC？BFC的原理是什麼？如何創建BFC？

• 作者：陳大魚頭
• github： KRISACHAN

盒模型

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

CSS盒模型描述了通過 文檔樹中的元素 以及相應的 視覺格式化模型(visual formatting model) 所生成的矩形盒子。

基礎盒模型(CSS basic box model)

當瀏覽器對一個 render tree 進行渲染時，瀏覽器的渲染引擎就會根據 基礎盒模型(CSS basic box model) ，將所有元素劃分爲一個個矩形的盒子，這些盒子的外觀，屬性由CSS來決定。

我們在瀏覽器控制檯輸入如下代碼就可以看到頁面的每一個元素都是由一個矩形來包裹的，這些就是盒子。

$$('*').forEach(e => {
  e.style.border = '1px solid';
})

圖示如下：

視覺格式化模型(visual formatting model)

CSS 的視覺格式化模型(visual formatting model) 是根據 基礎盒模型(CSS basic box model) 將 文檔(doucment) 中的元素轉換一個個盒子的實際算法。

官方說法就是： 它規定了用戶端在媒介中如何處理文檔樹( document tree )。

每個盒子的佈局由以下因素決定：

• 盒子的尺寸
• 盒子的類型：行內盒子 (inline)、行內級盒子 (inline-level)、原子行內級盒子 (atomic inline-level)、塊級盒子 (block-level)
• 定位：正常流、浮動、絕對定位
• 文檔樹中當前盒子的子元素 或 兄弟元素
• 視口(viewport) 的尺寸 和位置
• 盒子內部圖片的尺寸
• 其他某些外部因素

視覺格式化模型(visual formatting model) 的計算，都取決於一個矩形的邊界，這個矩形，被稱作是 包含塊( containing block ) 。 一般來說，(元素)生成的框會扮演它子孫元素包含塊的角色；我們稱之爲：一個(元素的)框爲它的子孫節點建造了包含塊。包含塊是一個相對的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

以上代碼爲例，div 和 table 都是包含塊。div 是 table 的包含塊，同時 table 又是 td 的包含塊，不是絕對的。

圖示：(圖片來自w3help)：

盒子的生成

盒子的生成是 CSS視覺格式化模型 的一部分，用於從文檔元素生成盒子。盒子的類型取決於CSS display 屬性。

格式化上下文(formatting context) 是定義 盒子環境 的規則，不同 格式化上下文(formatting context) 下的盒子有不同的表現。

以下是盒子相關的概念定義：

• 塊級元素

  • 當元素的display 爲 block、list-item 或 table 時，它就是塊級元素。

• 塊級盒子

  • 塊級盒子用於描述它與父、兄弟元素之間的關係。
  • 每個塊級盒子都會參與 塊格式化上下文（block formatting context） 的創建。
  • 每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box）
  • 主塊級盒子包含由後代元素生成的盒子以及內容，同時它也會參與定位方案。
  • 一個同時是塊容器盒子的塊級盒子稱爲塊盒子（block box）。

• 匿名盒子

  • 某些情況下需要進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能被CSS 選擇器選中，也就是所有可繼承的 CSS 屬性值都爲 inherit ，而所有不可繼承的 CSS 屬性值都爲 initial。因此稱爲匿名盒子(anonymous boxes)。

• 行內元素

  • 當元素的display 爲 inline、inline-block 或 inline-table 時，它就是行內級元素。
  • 顯示時可以與其他行內級內容一起顯示爲多行。

• 行內盒子

  • 行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文（inline formatting context）的創建。

• 匿名行內盒子

  • 類似於塊盒子，CSS引擎有時候也會自動創建一些行內盒子。這些行內盒子無法被選擇符選中，因此是匿名的，它們從父元素那裏繼承那些可繼承的屬性，其他屬性保持默認值 initial。

• 行盒子

  • 行盒子由行內格式化上下文創建，用來顯示一行文本。在塊盒子內部，行盒子總是從塊盒子的一邊延伸到另一邊（譯註：即佔據整個塊盒子的寬度）。當有浮動元素時，行盒子會從向左浮動的元素的右邊緣延伸到向右浮動的元素的左邊緣。

• run-in 盒子（在CSS 2.1的標準中移除了）

  • run-in盒子可以通過display: run-in來設置，它既可以是塊盒子，又可以是行內盒子，這取決於它後面的盒子的類型。

BFC(Block formatting contexts)

BFC 這個概念來自於 視覺格式化模型(visual formatting model) 中的 正常流(Normal flow)。

定義

浮動、絕對定位元素、塊容器（例如inline-blocks、table-cells、and table-captions）以及溢出而非可視的元素（除非該值已經傳播到了視口）都是建立 BFC(Block formatting contexts) 的條件。

表現

在BFC(Block formatting contexts)中，在包含塊內一個盒子一個盒子不重疊地垂直排列，兩個兄弟盒子直接的垂直距離由margin決定。浮動也是如此（雖然有可能兩個盒子的距離會因爲floats而變小），除非該盒子再創建一個新的BFC。

魚頭注：簡單來說，BFC就是一個獨立不干擾外界也不受外界干擾的盒子啊(/ω＼)。

塊級相關的計算

正常流中的塊級與非替換元素

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = 包含塊的寬度

上面的計算法則是基於 **writing-mode: ltr**而言，如果是別的書寫順序，則按照該順序來計算。

如果寬度不是 auto 或者 ‘border-left-width’+‘padding-left’+‘width’+‘padding-right’+‘border-right-width’ 的結果大於包含塊的寬度，對於以下規則，被視爲零。

如果只有一個值指定爲’auto’，則其使用的值來自相等。

如果寬度設置爲 auto ，則任何其他 auto 值變爲 0 ，並且寬度會跟着所以盒子的情況鋪滿。

如果 ‘margin-left’ 跟 ‘margin-right’ 都爲 auto ，則會使元素相對於包含塊的邊緣水平居中。

浮動與非替換元素

如果 ‘margin-left’ 跟 ‘margin-right’ 都爲 auto ，則它們的具體值爲 0 。

如果寬度爲 auto，則使用 shrink-to-fit 的寬度計算方式（CSS 2.2沒有定義精確的算法）。

然後 shrink-to-fit 大概的計算方式則是：min(max(preferred minimum width, available width), preferred width)。

絕對定位與非替換元素

‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + ‘right’ = 包含塊的寬度

如果 ‘left’，‘width’ 和 ‘right’ 都是 ‘auto’，則首先將 ‘margin-left’ 和 ‘margin-right’ 的 ‘auto’ 值設置爲 0。

如果 ‘left’，‘width’ 和 ‘right’ 都不是 ‘auto’，則按照實際值來算。

如果 ‘margin-left’ 跟 ‘margin-right’ 都爲 0 ，則根據 ‘left’ ，‘width’ 和 ‘right’ 的值是否是 ‘auto’ 來計算。 如果 一個方向值 ，‘width’ 的值是 ‘auto’，而 ‘另一個一個方向值’ 不是，則寬度使用 shrink-to-fit 算法計算。如果一個值爲**‘auto’**而另外兩個值不算，則該值使用 shrink-to-fit 來計算。

上面的計算法則是基於 writing-mode: ltr 而言，如果是別的書寫順序，則按照該順序來計算。

魚頭注：這裏特別說明一點，在MDN中依然把flexbox跟gridbox 算在 BFC中，但在最新的規範裏，它們已經從BFC中分離了出去，成爲獨立的一個CSS模塊，內容如下：

1. CSS Flexible Box Layout Module Level 1
2. CSS Grid Layout Module Level 2

如果你也喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公衆號“ 魚頭的Web海洋 ”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。