BFC
BFC（Block Formatting Contexts），塊級格式化上下文
盒模型
CSS?盒模型描述了通過?文檔樹中的元素?以及相應(yīng)的?視覺格式化模型?所生成的矩形盒子。簡單來說，盒模型定義了一個(gè)?矩形盒子早抠，當(dāng)我們需要對文檔進(jìn)行布局時(shí)到踏，瀏覽器的渲染引擎就會根據(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í)冻辩，元素會呈現(xiàn)怪異盒模型猖腕，此時(shí)，元素的寬高包含了內(nèi)容恨闪，內(nèi)邊距和邊框倘感。
視覺格式化模型
CSS視覺格式化模型描述了盒子是怎樣生成的，簡單來說咙咽，它定義了盒子生成的計(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）的生成彰檬，其中的盒主要包括了塊級盒,行內(nèi)盒和匿名盒。
塊級元素
CSS?屬性值?display?為?block谎砾，list-item逢倍，table?的元素。
塊級盒
塊級盒具有以下特性：
CSS屬性值display為block景图，list-item较雕，table時(shí)，它就是塊級元素
視覺上挚币，塊級盒呈現(xiàn)為豎直排列的塊
每個(gè)塊級盒都會參與BFC的創(chuàng)建
每個(gè)塊級元素都會至少生成一個(gè)塊級盒亮蒋，稱為主塊級盒扣典；一些元素可能會生成額外的塊級盒，比如<li>慎玖，用來存放項(xiàng)目符號
行內(nèi)級元素
CSS?屬性值?display?為?inline激捏，inline-block，inline-table?的元素凄吏。
行內(nèi)盒
行內(nèi)盒具有以下特性：
CSS屬性值display為inline远舅，inline-block，inline-table時(shí)痕钢，它就是行內(nèi)級元素
視覺上图柏，行內(nèi)盒與其他行內(nèi)級元素排列為多行
所有的可替換元素（display值為inline，如<img>任连，<iframe>蚤吹，<video>，<embed>等）生成的盒都是行內(nèi)盒随抠，它們會參與IFC（行內(nèi)格式化上下文）的創(chuàng)建
所有的非可替換行內(nèi)元素（display值為inline-block或inline-table）生成的盒稱為原子行內(nèi)級盒裁着，不參與IFC創(chuàng)建。
匿名盒
匿名盒指不能被?CSS?選擇器選中的盒子拱她，比如：
<div>
? 匿名盒1
? <p>塊盒</p>
? 匿名盒2
</div>
上述代碼片段中二驰，div?元素和?p?元素都會生成一個(gè)塊級盒，p?元素的前后會生成兩個(gè)匿名盒秉沼。
匿名盒所有可繼承的?CSS?屬性值都為?inherit桶雀，所有不可繼承的?CSS?屬性值都為?initial。
定位方案
CSS頁面布局技術(shù)允許我們拾取網(wǎng)頁中的元素唬复，并且控制它們相對正常布局流（普通流）矗积、周邊元素、父容器或者主視口/窗口的位置敞咧。技術(shù)布局從宏觀上來說是受定位方案影響棘捣，定位方案包括普通流（Normal Flow，也叫常規(guī)流休建，正常布局流）乍恐，浮動（Float），定位技術(shù)（Position）丰包。
