「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加了解 CSS 的原理，讓我在切版的時候可以更加確定自己在做什麼，我踩到的雷只是因為我不夠了解它才會炸開。
在這 30 天的內容中，會將 Spec 內看到的資料整理成這個系列，也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog，如果想直接看文內的程式碼 Demo 畫面，可以到我的 Blog 來看 ?。
「重新認識 CSS」系列文章發文於：
看一下在不同 CSS level 的 spec 中是如何定義 formatting context。
在 CSS 2.1 內的「9.4 Normal flow」 是這樣定義 formatting context：
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
也就是說，在 CSS 2.1 定義 normal flow 中的 box 屬於某種 formatting context，可是 block 或 inline，但不能同時使用。
而不同的 box 會參與不同的 formatting context：
但是在 CSS 2.2 內的同一個章節中，將定義改成以下內容：
Boxes in the normal flow belong to a formatting context, which in CSS 2.2 may be table, block or inline. In future levels of CSS, other types of formatting context will be introduced. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context. Table formatting contexts are described in the chapter on tables.
也就是說，在 CSS 2.2 定義 formatting context 可以是 table、block 或 inlline，並且說明在將來的 CSS level 會引入其他 type 的 formatting context。另外也可以看到在 CSS 2.2 刪掉了 CSS 2.1 中的 "but not both simultaneously" 這句，也就是其實 BFC 和 IFC 可以同時使用。
後來在 CSS Display Module Level 3 內也有定義 formatting context：
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. For example, a flex formatting context lays out boxes according to the flex layout rules [CSS3-FLEXBOX], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [CSS2].
也就是說，formatting context 是一種環境，相關的 box 會在此環境中佈局，不同的 formatting context 會根據不同的規則來佈局這些的 box。
例如：
一個 box 有兩種選擇：
而 box 建立的 formatting context 的 type 是由其 inner display type 來決定。
例如：
資料來源：
iThome鐵人賽
看影片追技術