1. background
Visual formatting model是CSS 2.1规范中，第9章介绍的一个概念，它的定义如下，
Visual formatting model:
How user agents process the document tree for visual media.
在浏览器环境中，Visual formatting model用于定义，
浏览器在显示文档时的处理方式。
文档中的每一个元素，根据box model的定义，会产生0个或多个box，
这些box的布局方式，受以下因素影响，
（1）box的尺寸（box dimensions）和类型（type）
（2）定位方式（positioning scheme）
包括正常流（normal flow），浮动（float），和绝对定位（absolute positioning）
（3）文档树（document tree）中元素的关系
（4）一些外部信息
例如，视口的大小（viewport size），图片的内在尺寸（Intrinsic dimensions）
Visual formatting model并不会指出对文档进行格式化操作（formatting）的方方面面，
例如，它并没有指定计算字符间距（letter-spacing）的算法，
如果规范中没有这样的约束，浏览器可以采用任何符合规定的做法。
2. containing block
CSS 2.1规范指出，
很多box的位置和大小，是根据一个与之相关的矩形来计算的，
称为包含块（containing block）。
通常，已经产生的box，会作为后续box的包含块。
每一个box，根据其包含块来确定位置（position），
但是并不一定会受限于包含块内，也有可能溢出（overflow）。
3. box generation
元素display属性，决定了由它产生的box的类型，
Visual formatting model对于不同类型的box，会有不同的格式化（formatting）方式。
3.1 block
block-level-element
block-level box
block container box
block box
anonymous block box（略
display: block / list-item / table;，指定了一个block-level element，
block-level element，会当做段落（paragraphs）来处理。
每一个block-level element，会创建一个principal block-level box，
用于包含后续的box和它们的内容，
block-level box，会受控于（participate in）block formatting context的影响。
除了display: table;，以及可替换元素（replaced element）之外
的block-level box，
都是block container box，其中可以包含block-level box，
或者它会创建一个inline formatting context，用于包含inline-level box。
有的block container box，不是block-level box，
例如，不可替换的行业块级元素（non-replaced inline blocks），不可替换的单元格（non-replaced table cells），
它们都是block container box，但都不是block-level box。
如果一个box，既是block-level box，又是block container box，
则称为block box。
3.2 inline
inline-level element
inline-level box
inline box
atomic inline-level box
anonymous inline box（略
display: inline / inline-table / inline-block;，指定inline-level element，
inline-level element中的内容，会显示在一行（distributed in lines）。
inline-level element，会创建inline-level box，
受控于inline formatting context的影响。
如果一个box，既是inline-level box，
而且其内容（content），也受到包含它的inline formatting context影响，
就称为inline box，
例如，设置了display: inline;的不可替换元素（non-replaced element），会创建一个inline box。
可替换的行内元素（replaced inline-level element），行内块级元素（inline-block element），inline-table元素，
都是inline-level box，但却不是inline box，
这些元素，称之为atomic inline-level box。
之所以称之为“atomic”，它是不透明的（opaque），
它们会作为一个整体受到inline formatting context的影响。
4. normal flow
正常流（normal flow）中的box，会受到格式化上下文（formatting context）的影响，
block-level box会受到block formatting context的影响，
inline-level box会受到inline formatting context的影响。
4.1 block formatting context
以下box会为它包含的内容（content），创建一个新的block formatting context，
（1）overflow不是visible的block box，
（2）不是block box，但是它设置了浮动，绝对定位
（3）不是block box，但它是一个block container box，例如，行内块（inline-block），单元格（table-cell），表格标题（table-caption）。
block formatting context中的box，会从一个containing block的顶部开始，
在垂直方向上，一个接一个的排列，
两个相邻的box间的垂直间距，由它们的margin属性决定，
并且，会发生collapsing margin。
block formatting context中，
每一个box的左边缘（left outer edge）紧贴containing block的左边缘，
即使设置了浮动，也是如此。
（除非这个box，创建了一个新的block formatting context）。
4.2 inline formatting context
inline formatting context中的box，会从一个container block的顶部开始，
在水平方向上，一个接一个的排列，
水平margin，border，padding，会作用到这些box上。
在垂直方向上的对齐方式，这些box可能会有不同，
可能底部对齐，或者顶部对齐，也有可能基于它们所包含的文字基线（baseline）进行对齐。
每一行的多个box，会包含在一个矩形区域中，
这个矩形区域，称为line box。
line box的宽度，取决于containing block，
line box的高度，取决于由line height calculations给出计算规则。
网友评论