前端進階之什麼是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)。

定義

浮動元素、絕對定位元素，'display' 特性為 "inline-block"，"table-cell"， "table-caption" 的元素，以及 'overflow' 不是 "visible" 的元素，會建立新的 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 而言，如果是別的書寫順序，則按照該順序來計算。

如果'width'不是 auto 並且'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'（加上'margin-left'或不是'auto'的'margin-right'）大於包含塊的寬度，則對於以下規則，'margin-left'或'margin-right'的任何'auto'值都將被視為零。

如果將'width'設定為 auto ，則其他所有 auto 值將變為 0。

如果寬度設定為 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 來計算。