Formatting Context

Formatting Context

你們一直在聊IFC（line formatting context）、BFC（block formatting context），但對於formatting text提之甚少，到底什麼是formatting text？

Formatting Context ：頁面由元素組成，元素的渲染都遵循必定的規則。一旦某元素應用了Formatting Context ，含有元素的區域就會拋棄原來的渲染規則，而後遵循它本身的新的渲染規則。這個渲染規則決定了子元素如何定位，及元素之間如何相互做用。可見的最大formatting context就是整個頁面。

box(盒模型)  ：在一個文檔中，每一個元素都被表示爲一個矩形的盒子。肯定尺寸, 屬性 --- 像它的顏色，背景，邊框方面 --- 和這些盒子的位置是渲染引擎的目標。在CSS中，使用標準盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊(margin edge), 邊框邊(border edge), 內填充邊(padding edge) 與 內容邊(content edge)。 

因此說，一個Box的渲染規則（在頁面上的具體展現）包含兩個方面：這個盒子所佔空間的內容與盒子在整個document中如何定位、及盒子之間如何相互做用。（注意：CSS做用的是盒子(Box), 而不是元素(Element)）

Formatting Context分類

不一樣的 Formatting Context 有不一樣的渲染規則，常見的有 BFC (Block Formatting Contextext)，IFC (Inline Formatting Context)，和 CSS 3 新增長的 GFC (Grid Formatting Context)，FFC (Flex Formatting Context)。