<meta charset="utf-8">

每个块级盒子都会参与块格式化上下文（block formatting context）的创建

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文(inline formatting context）的创建

1

CSS 视觉格式化模型（visual formatting model）

是用来处理和在媒介上显示文档（document）时使用的计算规则。（根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。）

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。

通常，盒子会创建一个包含其后代元素的包含块

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子(box)。

盒子的生成是 CSS 视觉格式化模型的一部分,盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。

块级元素

每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box），每个块级盒子都会参与块格式化上下文（block formatting context）的创建。

块容器盒子（block container box）要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文（inline formatting context）。

匿名块盒子

(通常的文档都会同时包含两者[block container box中同时包含block box和inline box]，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子[在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（anonymous boxes）]。)

另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，这个行内盒子会拆分为两个被匿名块盒子包裹的行内盒子，分别位于块盒子的前面和后面。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。

行内级元素和行内盒子

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。

通过替换行内级元素display 值为 inline-block 或 inline-table 的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行。

匿名行内盒子

一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 white-space 的设置而被移除，从而导致最终的实际内容为空。

块格式化上下文（Block Formatting Context，BFC）