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

上面的計算法則是基於 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海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。