1. background
Visual formatting model是CSS 2.1規(guī)范中，第9章介紹的一個(gè)概念，它的定義如下，
Visual formatting model:
How user agents process the document tree for visual media.
在瀏覽器環(huán)境中，Visual formatting model用于定義，
瀏覽器在顯示文檔時(shí)的處理方式。
文檔中的每一個(gè)元素，根據(jù)box model的定義，會(huì)產(chǎn)生0個(gè)或多個(gè)box，
這些box的布局方式，受以下因素影響，
（1）box的尺寸（box dimensions）和類型（type）
（2）定位方式（positioning scheme）
包括正常流（normal flow），浮動(dòng)（float），和絕對(duì)定位（absolute positioning）
（3）文檔樹(shù)（document tree）中元素的關(guān)系
（4）一些外部信息
例如，視口的大小（viewport size），圖片的內(nèi)在尺寸（Intrinsic dimensions）
Visual formatting model并不會(huì)指出對(duì)文檔進(jìn)行格式化操作（formatting）的方方面面，
例如，它并沒(méi)有指定計(jì)算字符間距（letter-spacing）的算法，
如果規(guī)范中沒(méi)有這樣的約束，瀏覽器可以采用任何符合規(guī)定的做法。
2. containing block
CSS 2.1規(guī)范指出，
很多box的位置和大小，是根據(jù)一個(gè)與之相關(guān)的矩形來(lái)計(jì)算的，
稱為包含塊（containing block）。
通常，已經(jīng)產(chǎn)生的box，會(huì)作為后續(xù)box的包含塊。
每一個(gè)box，根據(jù)其包含塊來(lái)確定位置（position），
但是并不一定會(huì)受限于包含塊內(nèi)，也有可能溢出（overflow）。
3. box generation
元素display屬性，決定了由它產(chǎn)生的box的類型，
Visual formatting model對(duì)于不同類型的box，會(huì)有不同的格式化（formatting）方式。
3.1 block
block-level-element
block-level box
block container box
block box
anonymous block box（略
display: block / list-item / table;，指定了一個(gè)block-level element，
block-level element，會(huì)當(dāng)做段落（paragraphs）來(lái)處理。
每一個(gè)block-level element，會(huì)創(chuàng)建一個(gè)principal block-level box，
用于包含后續(xù)的box和它們的內(nèi)容，
block-level box，會(huì)受控于（participate in）block formatting context的影響。
除了display: table;，以及可替換元素（replaced element）之外
的block-level box，
都是block container box，其中可以包含block-level box，
或者它會(huì)創(chuàng)建一個(gè)inline formatting context，用于包含inline-level box。
有的block container box，不是block-level box，
例如，不可替換的行業(yè)塊級(jí)元素（non-replaced inline blocks），不可替換的單元格（non-replaced table cells），
它們都是block container box，但都不是block-level box。
如果一個(gè)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中的內(nèi)容，會(huì)顯示在一行（distributed in lines）。
inline-level element，會(huì)創(chuàng)建inline-level box，
受控于inline formatting context的影響。
如果一個(gè)box，既是inline-level box，
而且其內(nèi)容（content），也受到包含它的inline formatting context影響，
就稱為inline box，
例如，設(shè)置了display: inline;的不可替換元素（non-replaced element），會(huì)創(chuàng)建一個(gè)inline box。
可替換的行內(nèi)元素（replaced inline-level element），行內(nèi)塊級(jí)元素（inline-block element），inline-table元素，
都是inline-level box，但卻不是inline box，
這些元素，稱之為atomic inline-level box。
之所以稱之為“atomic”，它是不透明的（opaque），
它們會(huì)作為一個(gè)整體受到inline formatting context的影響。
4. normal flow
正常流（normal flow）中的box，會(huì)受到格式化上下文（formatting context）的影響，
block-level box會(huì)受到block formatting context的影響，
inline-level box會(huì)受到inline formatting context的影響。
4.1 block formatting context
以下box會(huì)為它包含的內(nèi)容（content），創(chuàng)建一個(gè)新的block formatting context，
（1）overflow不是visible的block box，
（2）不是block box，但是它設(shè)置了浮動(dòng)，絕對(duì)定位
（3）不是block box，但它是一個(gè)block container box，例如，行內(nèi)塊（inline-block），單元格（table-cell），表格標(biāo)題（table-caption）。
block formatting context中的box，會(huì)從一個(gè)containing block的頂部開(kāi)始，
在垂直方向上，一個(gè)接一個(gè)的排列，
兩個(gè)相鄰的box間的垂直間距，由它們的margin屬性決定，
并且，會(huì)發(fā)生collapsing margin。
block formatting context中，
每一個(gè)box的左邊緣（left outer edge）緊貼containing block的左邊緣，
即使設(shè)置了浮動(dòng)，也是如此。
（除非這個(gè)box，創(chuàng)建了一個(gè)新的block formatting context）。
4.2 inline formatting context
inline formatting context中的box，會(huì)從一個(gè)container block的頂部開(kāi)始，
在水平方向上，一個(gè)接一個(gè)的排列，
水平margin，border，padding，會(huì)作用到這些box上。
在垂直方向上的對(duì)齊方式，這些box可能會(huì)有不同，
可能底部對(duì)齊，或者頂部對(duì)齊，也有可能基于它們所包含的文字基線（baseline）進(jìn)行對(duì)齊。
每一行的多個(gè)box，會(huì)包含在一個(gè)矩形區(qū)域中，
這個(gè)矩形區(qū)域，稱為line box。
line box的寬度，取決于containing block，
line box的高度，取決于由line height calculations給出計(jì)算規(guī)則。
