文章將陸續整理並更新至個人部落格。

前言

所有元素(element)都可以生成盒子(box)，什麼類型的元素，生成什麼類型的盒子，盒子可以裝盒子，整個版面都是盒子！這些盒子依照自己所屬的格式化上下文(formatting context)進行排列，不同的格式化上下文有不同的佈局規則。

那到底什麼是格式化上下文，今天就來認識一下吧～

格式化上下文 (Formatting Context)

先直接看一段 W3C 規範對於格式化上下文的定義。
摘自 W3C level 3

A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules.

A box either establishes a new independent formatting context or continues the formatting context of its containing block. The type of formatting context established by the box is determined by its inner display type. E.g. a grid container establishes a new grid formatting context, a ruby container establishes a new ruby formatting context, and a block container can establish a new block formatting context and/or a new inline formatting context. See the display property.

Additionally, some types of formatting contexts interleave and co-exist.

也就是說，

格式化上下文(formatting context)是個佈局環境，不同的佈局環境定有不同的佈局規則，而處在什麼佈局環境裡的元素(盒子)，就得遵守什麼環境的佈局規則，盒子也可以自立門戶，建立新的格式化上下文，再繼續裝盒子，有些類型的格式化上下文可以交互並存。而會建立什麼類型的格式化上下文，取決於 display 的內部顯示(inner display type)(可參考下圖)。

例如：

• block container 為後裔元素建立一個佈局環境 - block formatting context。
• grid container 為後裔元素建立一個佈局環境 - grid formatting context。
• ruby container 為後裔元素建立一個佈局環境 - ruby formatting context。
• ...

值得留意的是，在 W3C 對於 block container 的定義 中寫到

A block container box can both establish a block formatting context and an inline formatting context simultaneously.

也就是塊容器盒(block container)可以同時建立 BFC 與 IFC。

圖片來源:W3C

註：
① BFC 為塊格式化上下文(block formatting context)簡寫。
② IFC 為行內格式化上下文(inline formatting context)簡寫。
③ display: inline 元素為行內級元素(inline-level element)之一。
④ display: inline 的非替換元素(例如文字)，元素本身與內部內容皆會參與外部的 IFC。
⑤ 容器盒(container box)描述元素與後裔元素之間的關係，像是容器裝著後裔元素。
⑥ 替換元素(例如 )不會有容器盒(container box)，因其是外部連結的內容，無法裝其他元素。

independent formatting context

摘自 W3C

When a box establishes an independent formatting context (whether that formatting context is of the same type as its parent or not), it essentially creates a new, independent layout environment: except through the sizing of the box itself, the layout of its descendants is (generally) not affected by the the rules and contents of the formatting context outside the box, and vice versa.

Certain properties can force a box to establish an independent formatting context in cases where it wouldn’t ordinarily. For example, making a box out-of-flow causes it to blockify as well as to establish an independent formatting context.

當一個元素(盒子)建立獨立的格式化上下文，不論所建立的類型是否與其外部父容器相同，都是為其內部後裔元素建立了一個新的獨立佈局環境，所以內部後裔元素的佈局通常不必再遵守元素外部的格式化上下文佈局規則。

除了 display 之外，有些屬性也會使元素建立獨立的格式化上下文，例如 position: absolute 或 fixed 這種會使元素脫離文檔流(out-of-flow)的屬性。

一個比較直觀的例子是大家常用的 inline-block！

搭配上方 display 表格服用

簡單來說，

當對一個元素設定 display: inline-block 時，它會成為行內級元素(inline-level element)，生成行內級盒子(inline-level box)，元素本身對外參與行內格式化上下文(IFC)，而內部為其後裔元素建立了一個新的佈局環境，即塊格式化上下文(BFC)，故內部後裔元素不會一起參與外部 IFC。

註：
① 準確來說，inline-block 元素是原子級行內元素(atomic inline-level element)，而原子行內級元素為行內級元素(inline-level element)之一。
② 行內級元素(inline-level element)本身會參與 IFC。

今天簡單介紹了什麼是格式化上下文(formatting context)，而它又可分為幾種類型，明天將介紹其中一種類型 - 塊格式化上下文(block formatting context，BFC)。

明天見囉～

此文章為學習筆記，如有錯誤，煩請告知～感謝！

參考資料

W3C-Appendix A: Glossary
W3C-Box Layout Modes: the display property
W3C-Block-level elements and block boxes
W3C-Inline-level elements and inline boxes