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)。