一、介绍
CSS 视觉格式化模型（visual formatting model）定义了user agents在视觉媒体上渲染文档树的规则。根据CSS盒模型，在视觉格式化模型中，文档树中的每一个元素都会生成0个或者更多的框。
这些框的布局受以下几个因素控制：
- 框的`尺寸`和`类型` - 框的`定位模式`(normal flow, float, and absolute positioning). - 文档树元素之间的关系 - 其他(例如，视口尺寸，图片元素的`内在尺寸`，等等)1.1 视口
用于连续媒体的user agents通常向用户提供查阅文档的视口（窗口或屏幕上的浏览区域）。user agents可以在调整视口大小时更改文档的布局（请参阅初始包含块）。当视口小于渲染文档的画布区域时，应提供滚动机制。每个画布最多有一个视口，但是user agents可以渲染多个画布（提供同一文档的不同视图）。
1.2 包含块（Containing blocks）
CSS2.2 中许多框的位置和大小是根据包含块的边缘来计算的，通常元素生成的框是用来作为后代元素的包含块，常说一个框建立其后代的包含块。且一个框的包含块是指其参与布局所在的包含块，而不是其建立的包含块。
二、框的类型和产生
1.块级元素和块级框
块级元素：元素的outer display type为block的元素
块级框：参与在块级格式化上下文的框，一个块级框同时也是一个块容器盒，除非他是一个table box或者是一个替换元素的主框
块容器盒：仅包含块状框，或者建立一个行内格式化上下文从而只包含行内框
块容器元素：主框是一个块状容器盒的元素
并不是所有的块容器盒都是一个块级框：非替换的内联块和非替换的表格单元格是块容器盒，但是不是块级框。
匿名块级框
示例 1
<DIV> Some text <P>More text</DIV>（并且假设DIV和P都具有'display：block'），DIV似乎同时具有内联内容和块内容。为了更容易定义格式，我们假设“Some text”周围有一个匿名块级框。
换句话说：如果一个块容器盒（例如为上面的DIV生成的那个框）里面有一个块级框（比如上面的P），那么我们强制它在它里面只有块级框。
当内联框包含一个流内块级别框时，内嵌框（及其同一行盒的内联祖先）在块级框（以及任何连续或仅由可折叠的空白和/或流出元素分隔的块级兄弟）周围被打破。将内联框分成两个框（即使任一边是空的），块级框的每一边一个。 中断前和中断后的行盒都包含在匿名块框中，块级框成为这些匿名框的兄弟。 当这样的内联框受到相对定位的影响时，任何结果转换也会影响内联框中包含的块级框。
示例 2
<HTML><HEADER> <STYLE> p { display: inline; border: 1px solid #0084ff; } span { display: block; } </STYLE></HEADER><BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P></BODY></HTML>P元素包含匿名文本的块（C1），后跟块级元素，后跟另一个匿名文本块（C2）。 结果框将是一个表示BODY的块框，包含C1周围的匿名块框，SPAN块框和C2周围的另一个匿名块框。
匿名框的属性继承自封闭的非匿名框（例如，示例 1中DIV的那个框）。 非继承属性具有初始值。 例如，匿名框的字体继承自DIV，但边距将为0。
在导致生成匿名块框的元素上设置的属性仍适用于该元素的框和内容。 例如，在示例2中在P元素上设置了边框，则边框将围绕C1（在行的末尾打开）和C2（在行的开头处打开）绘制。
一些user agents已经以其他方式在包含块的内联上实现了边界，例如，通过将这些嵌套块包装在“匿名行框”内，从而在这些框周围绘制内联边框。 由于CSS1和CSS2没有定义此行为，因此仅CSS1和CSS2user agents可以实现此替代模型，并且仍声称符合CSS 2.2的这一部分。 这不适用于此规范发布后开发的UA。
在解析引用它的百分比值时，将忽略匿名框：使用最接近的非匿名祖先框。 例如，如果上面DIV中的匿名框的子项需要知道其包含块的高度以解析百分比高度，那么它将使用由DIV形成的包含块的高度，而不是匿名块的高度。
未完待续，翻译自CSS2.2规范