BFC是什么儡蔓？
BFC（Block Formatting Context）中文直譯就是‘塊級(jí)格式上下文’，它是 W3C CSS 2.1 規(guī)范中的一個(gè)概念煌茴，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位埋合，以及與其他元素的關(guān)系和相互作用卧须。
通俗點(diǎn)說(shuō)创淡，BFC是一個(gè)獨(dú)立的布局環(huán)境痴晦，我們可以理解為一個(gè)箱子（實(shí)際上是看不見(jiàn)摸不著的），箱子內(nèi)部的元素?zé)o論如何翻江倒海琳彩，都不會(huì)影響到外部誊酌。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響。）并且在一個(gè)BFC中露乏，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列碧浊。
BFC的產(chǎn)生條件
- overflow不為visible；
- 浮動(dòng)（float樣式不為none ）施无；
- 絕對(duì)定位（position樣式為absolue或者fixed ）；
- display為inline-block / table-cell / table-caption / flex / table-flex必孤；
BFC特性（作用）
在BFC中猾骡，內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置敷搪；
Box垂直方向的距離由margin決定兴想，同一個(gè)BFC下相鄰兩個(gè)Box的margin會(huì)發(fā)生重疊；
-
在BFC中赡勘，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來(lái)說(shuō)嫂便，則觸碰到右邊緣），即使存在浮動(dòng)也是如此闸与。
即不會(huì)發(fā)生margin穿透
形成了BFC的區(qū)域不會(huì)與float box重疊（可阻止因浮動(dòng)元素引發(fā)的文字環(huán)繞現(xiàn)象）毙替；
-
計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與計(jì)算（BFC會(huì)確切包含浮動(dòng)的子元素践樱，即閉合浮動(dòng)）厂画。
原本浮動(dòng)元素應(yīng)該是脫離文檔流的，但BFC中會(huì)計(jì)算其高度拷邢。
綜上特性所述袱院，BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。
BFC特性的一些應(yīng)用
實(shí)現(xiàn)自適應(yīng)兩欄布局
應(yīng)用了“BFC的區(qū)域不會(huì)與float box重疊”的特性忽洛；一邊浮動(dòng)腻惠，另一邊自適應(yīng)的部分形成BFC，那么兩者就不會(huì)重疊欲虚，避免了出現(xiàn)文字環(huán)繞及類(lèi)似情形集灌。解決父元素高度塌陷（也就是閉合內(nèi)部浮動(dòng) ）
應(yīng)用了“計(jì)算BFC高度時(shí)，浮動(dòng)元素也參與計(jì)算在內(nèi)”的特性苍在；解決垂直方向上兄弟元素的margin重疊
應(yīng)用了“屬于同一個(gè)BFC的兩個(gè)相鄰Boc的margin會(huì)發(fā)生重疊”的特性绝页。意味著如果相鄰兄弟元素不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了寂恬；
BFC特性應(yīng)用實(shí)例演示
實(shí)現(xiàn)自適應(yīng)兩欄布局
代碼：
<style type="text/css">
.container {
width: 500px;
}
.left {
width: 100px;
height: 150px;
background-color: #B3D1C1;
float: left;
}
.right {
height: 200px;
background-color: #A694C1;
/*把.right這個(gè)自適應(yīng)預(yù)算變成BFC续誉，
避免與.left這個(gè)有float屬性的元素重疊；*/
**overflow: hidden;**
}
</style>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
這里不能通過(guò)設(shè)置float樣式的方式把right變?yōu)锽FC初肉，因?yàn)閒loat有收縮酷鸦、緊密排列的特性，而right又沒(méi)有固定寬度牙咏，設(shè)置float屬性后臼隔，right就會(huì)收縮不見(jiàn)。
解決父元素高度塌陷（閉合內(nèi)部浮動(dòng) ）
高度塌陷產(chǎn)生原因：父元素未設(shè)置固定高度妄壶，完全由子元素高度撐開(kāi)摔握；當(dāng)子元素float之后脫離了文檔流，父元素內(nèi)部沒(méi)有支撐丁寄，造成高度塌陷氨淌。
解決：給塌陷的父元素添加overflow：hidden / auto使其變?yōu)锽FC。
代碼：
<style>
.container {
width: 300px;
border: 1px solid #999;
background-color: #DBD9B7;
/*使父元素變?yōu)锽FC伊磺，解決高度塌陷*/
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: #E67B85;
/*會(huì)造成高度塌陷*/
float: left;
}
</style>
<body>
<div class="container">container
<div class="son">son</div>
</div>
</body>
解決垂直方向上兄弟元素的margin重疊
代碼：
<style>
p {
width: 200px;
height: 100px;
background-color: #fcc;
margin: 25px;
}
.wrap {
/*p外面包裹一層盛正，并按如下設(shè)置，
形成一個(gè)單獨(dú)的BFC*/
overflow: hidden;
}
</style>
<body>
<div class="wrap">
<p class="a">a</p>
</div>
<p class="b">b</p>
</body>
觸發(fā)BFC的屬性（方法）與自適應(yīng)布局面面觀
- float：left屑埋。動(dòng)元素本身BFC化豪筝，然而浮動(dòng)元素有破壞性和包裹性，失去了元素本身的流體自適應(yīng)性摘能，因此续崖，無(wú)法用來(lái)實(shí)現(xiàn)自動(dòng)填滿容器的自適應(yīng)布局。不過(guò)团搞，其因兼容性還算良好袜刷。
- position：absolute。脫離文檔流嚴(yán)重莺丑，不建議使用著蟹。
- overflow：hidden墩蔓。元素BFC本身塊狀元素的流體特性仍可比較完好得保留。不足之處是如果內(nèi)容過(guò)多萧豆，可能會(huì)被裁剪奸披。
- display：inline-blockl。display:inline-block會(huì)讓元素尺寸包裹收縮涮雷，完全就不是我們想要的block水平的流動(dòng)特性阵面。唉，只能是一聲嘆氣一槍斃掉的命洪鸭！然而样刷，峰回路轉(zhuǎn)，世事難料览爵。大家應(yīng)該知道置鼻，IE6/IE7瀏覽器下，block水平的元素設(shè)置display:inline-block元素還是block水平蜓竹，也就是還是會(huì)自適應(yīng)容器的可用寬度顯示箕母。
- display：table-cell。讓元素表現(xiàn)得像單元格一樣俱济，IE8+以上瀏覽器才支持嘶是。跟display:inline-block一樣，會(huì)跟隨內(nèi)部元素的寬度顯示蛛碌，看樣子也是不合適的命聂喇。但是，單元格有個(gè)非常神奇的特性蔚携，就是你寬度值設(shè)置地再大希太，實(shí)際寬度也不會(huì)超過(guò)表格容器的寬度。因此浮梢，如果我們把display:table-cell這個(gè)BFC元素寬度設(shè)置很大跛十，比方說(shuō)3000像素。那其實(shí)就跟block水平元素自動(dòng)適應(yīng)容器空間效果一模一樣了远豺。
- 剩下的基本一無(wú)是處坞嘀，就不展開(kāi)了丽涩。
綜上總結(jié)裁蚁，能擔(dān)任自適應(yīng)布局的方法也就是：
- overflow：auto / hidden（id7+）
- display：inline-block（ie6枉证、ie7）
- display：table-cell（ie8+）
而由于overflow有剪裁和出現(xiàn)滾動(dòng)條等隱患室谚，不適合作為整站通用類(lèi)秒赤，于是憎瘸，最后含思，類(lèi)似清除浮動(dòng)的通用類(lèi)語(yǔ)句：
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: ''; display: table; clear: both;
}
兩欄或多欄自適應(yīng)布局的通用類(lèi)語(yǔ)句是（block標(biāo)簽需配合浮動(dòng)）：
.cell {
display: table-cell; width: 9999px;
*display: inline-block; *width: auto;
}
參考資料
結(jié)語(yǔ)
文章整理于自己的學(xué)習(xí)筆記，多為個(gè)人理解饲做，僅供參考遏弱；如有真知灼見(jiàn)，歡迎交流漱逸。
文章始發(fā)于http://www.lipengcheng.xyz 如需轉(zhuǎn)載饰抒，請(qǐng)注明出處，謝謝袋坑。
