CSS中各種佈局的背後，實質上是各種*FC的組合。CSS2.1中只有BFC和IFC,CSS3 中還增加了FFC和GFC。
盒模型(BoxModel)
上圖為W3C標準盒模型，另外還有一種IE盒模型（IE6以下），唯一的區別就是：前者width= content，後者width= content + padding + border
若要將IE盒模型轉換為標準盒模型，需要在文檔頂部加上聲明；很有意思的是，後來CSS3中也增加了box-sizing屬性，box-sizing:content-box即標準盒模型，box-sizing:border-box即IE盒模型（width包含內邊距和邊框），W3C反過來又承認了微軟，也是有意思。
視覺格式化模型(VisualFormatting Model)
視覺格式化模型(visualformattingmodel)是用來處理文檔並將它顯示在視覺媒體上的機制，根據上述的盒模型，為文檔元素生成盒（Box）。通俗的說，視覺格式化模型就是文檔裡的盒子佈局呈現的一種規則。
影響佈局的因素
- 盒的尺寸和類型
- 定位方案 PositioningScheme（常規流，浮動和絕對定位）
- 文檔樹中元素之間的關係
- 外部信息（如：視口大小，圖片的固有尺寸等）
FC– Formatting Context
FC…是誰在說髒話？！FormattingContext – 格式化上下文，*FC就是視覺格式化模型，用來描述盒子佈局規則。
前方大波概念來襲！
塊級元素、塊級盒、塊容器盒、塊盒、匿名塊盒、行內級元素、行內級盒、原子行內級盒、原子行內盒、行盒、匿名行內盒、插入盒…要報警了！！！這些真的不是我YY出來的，W3C裡真的有這麼多概念好嗎！！！感覺進坑了啊！！！headache…來吧，一個個捋清楚…-_-|||
- 塊級元素(Block-levelelements)：當元素的CSS屬性 display:block/ list-item / table 時，它就是是塊級元素block-level，視覺上呈現為塊，豎直排列。每個塊級元素生成一個主要的塊級盒(PrincipalBlock-level Box) 來包含其後代盒和生成的內容，同時參與定位體系(PositioningScheme) 。某些塊級元素還會在主要盒之外產生額外的盒：list-item元素。這些額外的盒會相對於主要盒來擺放。
- 塊級盒(Block-levelboxes) ：由塊級元素生成，參與塊級格式化上下文(BFC)。描述元素跟它的父元素與兄弟元素之間的表現。
- 塊容器盒(Blockcontainer box)：只包含其它塊級盒，或生成一個行內格式化上下文(inlineformattingcontext)，只包含行內盒。有些塊級盒，比如表格，不是塊容器盒。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的後代之間的影響。
- 塊盒(Blockboxes)：同時是塊容器盒的塊級盒。
- 匿名塊盒(Anonymousblock boxes)：沒有名字，不能被CSS選擇符選中。塊容器盒要麼只包含行內級盒，要麼只包含塊級盒，但通常文檔會同時包含兩者，在這種情況下，將創建匿名塊盒來包含毗鄰的行內級盒。
- 行內級元素(Inline-levelelements)：當元素的CSS屬性 display：inline,inline-block 或inline-table時，稱它為行內級元素。行內級元素生成行內級盒(inline-levelboxes)，參與行內格式化上下文(IFC)。
- 行內級盒(Inline-levelboxes)：所有 display:inline的非替換元素生成的盒是行內盒。
- 原子行內級盒(atomicinline-level boxes)：不參與生成行內格式化上下文的行內級盒稱為原子行內級盒(atomicinline-level boxes)。
- 原子行內盒(atomicinline boxes)：注意：起初原子行內級盒(atomicinline-level boxes)被稱為原子行內盒(atomicinlineboxes)。很不幸，它們並非行內盒。規範的勘誤表修正了這個錯誤。不管怎樣，當再看到原子行內盒時可以放心的當成原子行內級盒，因為只是改了名字。原子行內盒在行內格式化上下文裡不能分成多行。
- 行盒(Lineboxes)：行盒由行內格式化上下文(IFC)產生的盒，用於表示一行。在塊盒裡面，行盒從塊盒一邊排版到另一邊。當有浮動時,行盒從左浮動的最右邊排版到右浮動的最左邊。
- 匿名行內盒(Anonymousinline boxes)：匿名行內盒最常見的例子是塊盒直接包含文本。
- 插入盒(Run-inboxes)：插入盒(Run-inboxes)從CSS2.1 標準中移除了，因為可操作的實現定義不足。可能 CSS3會引入，但是這是實驗性質，不能用於生產環境。
定位方案(Positioningschemes)
-常規流(Normalflow)
CSS2.1中，常規流包括塊級盒的塊格式化，行內盒的行內格式化，以及塊級盒和行內級盒的相對定位。
-浮動(Floats)
在浮動模型中，盒首先根據常規流佈局，然後從常規流中脫離並儘可能地向左或向右位移。內容可以佈局在浮動周圍。
-絕對定位(Absolutepositioning)
在絕對定位模型中，盒完全從常規流中脫離（對後面的同胞元素無影響）並根據包含塊來分配位置。
BFC– Block Formatting Context
觸發條件
- 根元素或其它包含它的元素
- 浮動 float:left/right/inherit
- 絕對定位元素 "western" style="margin-bottom: 0in; ; page-break-inside: auto; orphans: 2; widows: 2; page-break-after: auto">行內塊 display:inline-block
- 表格單元格 display:table-cell
- 表格標題 display:table-caption
- 溢出元素 overflow:hidden/scroll/auto/inherit
- 彈性盒子 display:flex/inline-flex
佈局規則
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
- 每個元素的marginbox的左邊，與包含塊borderbox的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與floatbox重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算
應用場景
- 閉合浮動：浮動區域不疊加到BFC區域上
- 防止與浮動元素重疊
- 防止margincollapse
- float元素高度塌陷
- …
IFC– Inline Formatting Contexts
觸發條件
一個塊級元素中僅包含內聯級別元素
佈局規則
- 內部的盒子會在水平方向，一個接一個地放置。
- 這些盒子垂直方向的起點從包含塊盒子的頂部開始。
- 擺放這些盒子的時候，它們在水平方向上的padding、border、margin所佔用的空間都會被考慮在內。
- 在垂直方向上，這些框可能會以不同形式來對齊（vertical-align）：它們可能會使用底部或頂部對齊，也可能通過其內部的文本基線（baseline）對齊。
- 能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框（linebox）。行框的寬度是由包含塊（containingbox）和存在的浮動來決定。
- IFC中的linebox 一般左右邊都貼緊其包含塊，但是會因為float元素的存在發生變化。float元素會位於IFC與與linebox 之間，使得linebox 寬度縮短。
- IFC中的linebox 高度由CSS行高計算規則來確定，同個IFC下的多個linebox 高度可能會不同（比如一行包含了較高的圖片，而另一行只有文本）
- 當inline-levelboxes 的總寬度少於包含它們的linebox 時，其水平渲染規則由text-align屬性來確定，如果取值為justify，那麼瀏覽器會對inline-boxes（注意不是inline-table和inline-blockboxes）中的文字和空格做出拉伸。
- 當一個inlinebox 超過linebox 的寬度時，它會被分割成多個boxes，這些boxes被分佈在多個linebox 裡。如果一個inlinebox 不能被分割（比如只包含單個字符，或word-breaking機制被禁用，或該行內框受white-space屬性值為nowrap或pre的影響），那麼這個inlinebox 將溢出這個linebox。
應用場景
- 水平居中：當一個塊要在環境中水平居中時，設置其為inline-block則會在外層產生IFC，通過設置父容器text-align:center則可以使其水平居中。
- 垂直居中：創建一個IFC，用其中一個元素撐開父元素的高度，然後設置其vertical-align:middle，其他行內元素則可以在此父元素下垂直居中。
FFC– Flex Formatting Contexts
觸發條件
當display的值為flex或inline-flex時，將生成彈性容器（FlexContainers）,一個彈性容器為其內容建立了一個新的彈性格式化上下文環境（FFC）
佈局規則
- 設置為 flex的容器被渲染為一個塊級元素
- 設置為 inline-flex的容器則渲染為一個行內元素
- 彈性容器中的每一個子元素都是一個彈性項目。彈性項目可以是任意數量的。彈性容器外和彈性項目內的一切元素都不受影響。簡單地說，Flexbox定義了彈性容器內彈性項目該如何佈局
GFC– GridLayout Formatting Contexts
觸發條件
當為一個元素設置display值為grid的時候，此元素將會獲得一個獨立的渲染區域
佈局規則
通過在網格容器（gridcontainer）上定義網格定義行（griddefinition rows）和網格定義列（griddefinition columns）屬性各在網格項目（griditem）上定義網格行（gridrow）和網格列（gridcolumns）為每一個網格項目（griditem）定義位置和空間
閱讀更多 渡一教育web前端開發 的文章
