參考：理解CSS布局和BFC
CSS深入理解流體特性和BFC特性下多欄自適應(yīng)布局
1缚俏、概念
BFC(Block Formatting Context)：塊級(jí)格式化上下文。
BFC元素特性的表現(xiàn)原則就是：無(wú)論內(nèi)部元素處于什么狀態(tài)梭姓，都不影響外部元素。
????當(dāng)盒子里的某一個(gè)元素設(shè)置為浮動(dòng)時(shí)嫩码，盒子元素的高度可能會(huì)低于浮動(dòng)元素的高度誉尖。可以將BFC看作頁(yè)面中的一個(gè)迷你布局铸题。一旦創(chuàng)建铡恕，它其中的所有元素都被包裹，盒子不會(huì)因?yàn)閮?nèi)部元素浮動(dòng)而坍塌丢间。
2探熔、觸發(fā)情況
(1) float的值不為none;
(2) overflow的值為auto, scroll, 或hidden;
(3) display的值為table-cell， table-caption, 或者inline-block;
(4) display:flow-root; （兼容性不高）
(5) position不為relative和static烘挫。
3诀艰、優(yōu)點(diǎn)
(1) 自適應(yīng)內(nèi)容由于封閉，更健壯墙牌，容錯(cuò)性強(qiáng)涡驮。比方說(shuō)暗甥，內(nèi)部clear:both不會(huì)與兄弟float產(chǎn)生矛盾喜滨。而純流體布局，clear:both會(huì)讓后面內(nèi)容無(wú)法和float元素在一個(gè)水平上撤防，產(chǎn)生布局問(wèn)題;
(2) 自適應(yīng)內(nèi)容自動(dòng)填滿(mǎn)浮動(dòng)以為區(qū)域虽风，無(wú)需關(guān)心浮動(dòng)元素寬度，可以整站大規(guī)模應(yīng)用寄月。而純流體布局辜膝，需要大小不確定的margin/padding等值撐開(kāi)合適間距，無(wú)法CSS組件化漾肮。
4厂抖、一些缺陷
(1) float:left 浮動(dòng)元素本身BFC化，然而浮動(dòng)元素有破壞性和包裹性克懊，失去了元素本身的流體自適應(yīng)性忱辅，因此，無(wú)法用來(lái)實(shí)現(xiàn)自動(dòng)填滿(mǎn)容器的自適應(yīng)布局谭溉；
(2) position: absolute; 脫離文檔流墙懂；
(3) display:table-cell 讓元素表現(xiàn)得像單元格一樣，IE8+以上瀏覽器才支持扮念。
5损搬、自適應(yīng)布局可用方法：
(1) overflow:auto/hidden IE7+
(2) display:inline-block IE6/IE7
(3) display:table-cell IE8+
6、BFC一些有用的功能
(1) 阻止外邊距疊加
(2) 停止去圍繞浮動(dòng)元素
