摘要：中各種布局的背后，實質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項目內(nèi)的一切元素都不受影響。

CSS中各種布局的背后，實質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。

.png)

上圖為W3C標(biāo)準(zhǔn)盒模型，另外還有一種IE盒模型（IE6以下），唯一的區(qū)別就是：前者width = content，后者width = content + padding + border
若要將IE盒模型轉(zhuǎn)換為標(biāo)準(zhǔn)盒模型，需要在文檔頂部加上聲明；很有意思的是，后來CSS3 中也增加了box-sizing屬性，box-sizing: content-box即標(biāo)準(zhǔn)盒模型，box-sizing: border-box即IE盒模型（width包含內(nèi)邊距和邊框），W3C反過來又承認(rèn)了微軟，也是有意思。

視覺格式化模型(visual formatting model)是用來處理文檔并將它顯示在視覺媒體上的機制，根據(jù)上述的盒模型，為文檔元素生成盒（Box）。通俗的說，視覺格式化模型就是文檔里的盒子布局呈現(xiàn)的一種規(guī)則。

影響布局的因素

盒的尺寸和類型

定位方案 Positioning Scheme （常規(guī)流，浮動和絕對定位）

文檔樹中元素之間的關(guān)系

外部信息（如：視口大小，圖片的固有尺寸等）

FC...是誰在說臟話？！ Formatting Context -- 格式化上下文，*FC就是視覺格式化模型，用來描述盒子布局規(guī)則。

塊級元素、塊級盒、塊容器盒、塊盒、匿名塊盒、行內(nèi)級元素、行內(nèi)級盒、原子行內(nèi)級盒、原子行內(nèi)盒、行盒、匿名行內(nèi)盒、插入盒......要報警了！！！這些真的不是我YY出來的，W3C 里真的有這么多概念好嗎！！！感覺進(jìn)坑了啊！！！headache...來吧，一個個捋清楚... -_-|||

塊級元素(Block-level elements)：當(dāng)元素的 CSS 屬性 display:block / list-item / table 時，它就是是塊級元素 block-level ，視覺上呈現(xiàn)為塊，豎直排列。每個塊級元素生成一個主要的塊級盒 (Principal Block-level Box) 來包含其后代盒和生成的內(nèi)容，同時參與定位體系 (Positioning Scheme) 。某些塊級元素還會在主要盒之外產(chǎn)生額外的盒： list-item 元素。這些額外的盒會相對于主要盒來擺放。

塊級盒(Block-level boxes)：由塊級元素生成，參與塊級格式化上下文(BFC)。描述元素跟它的父元素與兄弟元素之間的表現(xiàn)。

塊容器盒(Block container box)：只包含其它塊級盒，或生成一個行內(nèi)格式化上下文(inline formatting context)，只包含行內(nèi)盒。有些塊級盒，比如表格，不是塊容器盒。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。

塊盒(Block boxes)：同時是塊容器盒的塊級盒。

匿名塊盒(Anonymous block boxes)：沒有名字，不能被 CSS 選擇符選中。塊容器盒要么只包含行內(nèi)級盒，要么只包含塊級盒，但通常文檔會同時包含兩者，在這種情況下，將創(chuàng)建匿名塊盒來包含毗鄰的行內(nèi)級盒。

   I am Block container box
   
I"m Inline-level boxes
   I am Block container box

行內(nèi)級元素(Inline-level elements)：當(dāng)元素的 CSS 屬性 display：inline, inline-block 或 inline-table 時，稱它為行內(nèi)級元素。行內(nèi)級元素生成行內(nèi)級盒(inline-level boxes)，參與行內(nèi)格式化上下文(IFC)。

行內(nèi)級盒(Inline-level boxes)：所有 display:inline 的非替換元素生成的盒是行內(nèi)盒。

原子行內(nèi)級盒(atomic inline-level boxes)：不參與生成行內(nèi)格式化上下文的行內(nèi)級盒稱為原子行內(nèi)級盒(atomic inline-level boxes)。

原子行內(nèi)盒(atomic inline boxes)：注意：起初原子行內(nèi)級盒(atomic inline-level boxes)被稱為原子行內(nèi)盒(atomic inline boxes)。很不幸，它們并非行內(nèi)盒。規(guī)范的勘誤表修正了這個錯誤。不管怎樣，當(dāng)再看到原子行內(nèi)盒時可以放心的當(dāng)成原子行內(nèi)級盒，因為只是改了名字。原子行內(nèi)盒在行內(nèi)格式化上下文里不能分成多行。

行盒(Line boxes)：行盒由行內(nèi)格式化上下文(IFC)產(chǎn)生的盒，用于表示一行。在塊盒里面，行盒從塊盒一邊排版到另一邊。 當(dāng)有浮動時, 行盒從左浮動的最右邊排版到右浮動的最左邊。

匿名行內(nèi)盒(Anonymous inline boxes)：匿名行內(nèi)盒最常見的例子是塊盒直接包含文本。

插入盒(Run-in boxes)：插入盒(Run-in boxes)從 CSS 2.1 標(biāo)準(zhǔn)中移除了，因為可操作的實現(xiàn)定義不足。 可能 CSS3 會引入，但是這是實驗性質(zhì)，不能用于生產(chǎn)環(huán)境。

CSS2.1中，常規(guī)流包括塊級盒的塊格式化，行內(nèi)盒的行內(nèi)格式化，以及塊級盒和行內(nèi)級盒的相對定位。

在浮動模型中，盒首先根據(jù)常規(guī)流布局，然后從常規(guī)流中脫離并盡可能地向左或向右位移。內(nèi)容可以布局在浮動周圍。

在絕對定位模型中，盒完全從常規(guī)流中脫離（對后面的同胞元素?zé)o影響）并根據(jù)包含塊來分配位置。

根元素或其它包含它的元素

浮動 float: left/right/inherit

絕對定位元素 position: absolute/fixed

行內(nèi)塊 display: inline-block

表格單元格 display: table-cell

表格標(biāo)題 display: table-caption

溢出元素 overflow: hidden/scroll/auto/inherit

彈性盒子 display: flex/inline-flex

內(nèi)部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。

每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區(qū)域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

閉合浮動：浮動區(qū)域不疊加到BFC區(qū)域上

防止與浮動元素重疊

防止margin collapse

float 元素高度塌陷

...

一個塊級元素中僅包含內(nèi)聯(lián)級別元素

內(nèi)部的盒子會在水平方向，一個接一個地放置。

這些盒子垂直方向的起點從包含塊盒子的頂部開始。

擺放這些盒子的時候，它們在水平方向上的 padding、border、margin 所占用的空間都會被考慮在內(nèi)。

在垂直方向上，這些框可能會以不同形式來對齊（vertical-align）：它們可能會使用底部或頂部對齊，也可能通過其內(nèi)部的文本基線（baseline）對齊。

能把在一行上的框都完全包含進(jìn)去的一個矩形區(qū)域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和存在的浮動來決定。

IFC中的 line box 一般左右邊都貼緊其包含塊，但是會因為float元素的存在發(fā)生變化。float 元素會位于IFC與與 line box 之間，使得 line box 寬度縮短。

IFC 中的 line box 高度由 CSS 行高計算規(guī)則來確定，同個 IFC 下的多個 line box 高度可能會不同（比如一行包含了較高的圖片，而另一行只有文本）

當(dāng) inline-level boxes 的總寬度少于包含它們的 line box 時，其水平渲染規(guī)則由 text-align 屬性來確定，如果取值為 justify，那么瀏覽器會對 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。

當(dāng)一個 inline box 超過 line box 的寬度時，它會被分割成多個boxes，這些 boxes 被分布在多個 line box 里。如果一個 inline box 不能被分割（比如只包含單個字符，或 word-breaking 機制被禁用，或該行內(nèi)框受 white-space 屬性值為 nowrap 或 pre 的影響），那么這個 inline box 將溢出這個 line box。

水平居中：當(dāng)一個塊要在環(huán)境中水平居中時，設(shè)置其為 inline-block 則會在外層產(chǎn)生 IFC，通過設(shè)置父容器 text-align:center 則可以使其水平居中。

垂直居中：創(chuàng)建一個IFC，用其中一個元素?fù)伍_父元素的高度，然后設(shè)置其 vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。

當(dāng) display 的值為 flex 或 inline-flex 時，將生成彈性容器（Flex Containers）, 一個彈性容器為其內(nèi)容建立了一個新的彈性格式化上下文環(huán)境（FFC）

設(shè)置為 flex 的容器被渲染為一個塊級元素

設(shè)置為 inline-flex 的容器則渲染為一個行內(nèi)元素

彈性容器中的每一個子元素都是一個彈性項目。彈性項目可以是任意數(shù)量的。彈性容器外和彈性項目內(nèi)的一切元素都不受影響。簡單地說，F(xiàn)lexbox 定義了彈性容器內(nèi)彈性項目該如何布局

當(dāng)為一個元素設(shè)置display值為grid的時候，此元素將會獲得一個獨立的渲染區(qū)域

通過在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個網(wǎng)格項目（grid item）定義位置和空間

參考：

Visual formatting model

視覺格式化模型

BFC 神奇背后的原理