BFC
BFC（Block Formatting Contexts），塊級(jí)格式化上下文
盒模型
CSS?盒模型描述了通過?文檔樹中的元素?以及相應(yīng)的?視覺格式化模型?所生成的矩形盒子。簡(jiǎn)單來說，盒模型定義了一個(gè)?矩形盒子，當(dāng)我們需要對(duì)文檔進(jìn)行布局時(shí)，瀏覽器的渲染引擎就會(huì)根據(jù)盒模型，將所有元素表示為一個(gè)個(gè)矩形的盒子，盒子的外觀由?CSS?決定。
一個(gè)標(biāo)準(zhǔn)的盒子由四個(gè)部分組成，由內(nèi)向外分別為：內(nèi)容，內(nèi)邊距，邊框，外邊距：
標(biāo)準(zhǔn)的盒模型中，內(nèi)容區(qū)域的大小可以明確地通過width，min-width，max-width，height，min-height，max-height控制，也就是說，通過CSS設(shè)置的元素寬高只是包含內(nèi)容區(qū)域。你可能聽說過怪異盒模型，這種盒模型最早在IE瀏覽器中出現(xiàn)，也叫IE盒模型，box-sizing屬性值為border-box時(shí)，元素會(huì)呈現(xiàn)怪異盒模型，此時(shí)，元素的寬高包含了內(nèi)容，內(nèi)邊距和邊框。
視覺格式化模型
CSS視覺格式化模型描述了盒子是怎樣生成的，簡(jiǎn)單來說，它定義了盒子生成的計(jì)算規(guī)則，通過規(guī)則將文檔元素轉(zhuǎn)換為一個(gè)個(gè)盒子。
每個(gè)盒子的布局由尺寸，類型，定位，盒子的子元素或兄弟元素，視口的尺寸和位置等因素決定。
視覺格式化模型的計(jì)算，取決于一個(gè)矩形的邊界，這個(gè)邊界，就是包含塊( containing block )：
<table>
?????<tr>
????????<td></td>
? ? ? </tr>
</table>
上述代碼中，table和tr都是包含塊，table是tr的包含塊，同時(shí)tr又是td的包含塊。
盒子不受包含塊的限制，當(dāng)盒子的布局跑到包含塊的外面時(shí)，就是我們說的溢出（overflow）。
視覺格式化模型定義了盒（Box）的生成，其中的盒主要包括了塊級(jí)盒,行內(nèi)盒和匿名盒。
塊級(jí)元素
CSS?屬性值?display?為?block，list-item，table?的元素。
塊級(jí)盒
塊級(jí)盒具有以下特性：
CSS屬性值display為block，list-item，table時(shí)，它就是塊級(jí)元素
視覺上，塊級(jí)盒呈現(xiàn)為豎直排列的塊
每個(gè)塊級(jí)盒都會(huì)參與BFC的創(chuàng)建
每個(gè)塊級(jí)元素都會(huì)至少生成一個(gè)塊級(jí)盒，稱為主塊級(jí)盒；一些元素可能會(huì)生成額外的塊級(jí)盒，比如<li>，用來存放項(xiàng)目符號(hào)
行內(nèi)級(jí)元素
CSS?屬性值?display?為?inline，inline-block，inline-table?的元素。
行內(nèi)盒
行內(nèi)盒具有以下特性：
CSS屬性值display為inline，inline-block，inline-table時(shí)，它就是行內(nèi)級(jí)元素
視覺上，行內(nèi)盒與其他行內(nèi)級(jí)元素排列為多行
所有的可替換元素（display值為inline，如<img>，<iframe>，<video>，<embed>等）生成的盒都是行內(nèi)盒，它們會(huì)參與IFC（行內(nèi)格式化上下文）的創(chuàng)建
所有的非可替換行內(nèi)元素（display值為inline-block或inline-table）生成的盒稱為原子行內(nèi)級(jí)盒，不參與IFC創(chuàng)建。
匿名盒
匿名盒指不能被?CSS?選擇器選中的盒子，比如：
<div>
? 匿名盒1
? <p>塊盒</p>
? 匿名盒2
</div>
上述代碼片段中，div?元素和?p?元素都會(huì)生成一個(gè)塊級(jí)盒，p?元素的前后會(huì)生成兩個(gè)匿名盒。
匿名盒所有可繼承的?CSS?屬性值都為?inherit，所有不可繼承的?CSS?屬性值都為?initial。
定位方案
CSS頁面布局技術(shù)允許我們拾取網(wǎng)頁中的元素，并且控制它們相對(duì)正常布局流（普通流）、周邊元素、父容器或者主視口/窗口的位置。技術(shù)布局從宏觀上來說是受定位方案影響，定位方案包括普通流（Normal Flow，也叫常規(guī)流，正常布局流），浮動(dòng)（Float），定位技術(shù)（Position）。
