BFC是什麼？
阿新 • • 發佈：2018-12-12
一、什麼是BFC? 1.BFC的概念 BFC全稱Block Formatting Context ，直譯“塊級格式化上下文”，也有譯作“塊級格式化範圍”。它是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。通俗的講，就是一個div內部，我們用float和margin佈局元素。
個人理解：BFC相當於構建了一個密閉的盒子模型，在BFC中的元素不受外部元素的影響BFC就是把盒子中子元素的屬性鎖在父元素中，使其不影響盒子外的元素
二、BFC是如何產生的
- 根元素(html)
- float的值不為none
- position的值為absolute和fixed
- display的值為table-cell、table-caption、flex、inline-flex
- overflow的值部位visible 只要滿足以上條件之一就能觸發BFC
三、BFC在佈局中的應用 防止margin重疊：
同一個BFC中的兩個相鄰Box才會發生重疊與方向無關，不過由於上文提到的第一條限制，我們甚少看到水平方向的margin重疊。這在IE中是個例外，IE可以設定write-mode。下面這個demo來自寒冬大神的部落格。
<!doctype HTML> <html> <head> <style type="text/css"> #green { margin:10px 10px 10px 10px } #blue { margin:10px 10px 10px 10px } #red { margin:10px 10px 10px 10px } body { writing-mode:tb-rl; } </style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div> <div id="blue" style="background:lightblue;height:100px;width:100px;"></div> <div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>
可以看到水平方向的margin發生了重疊。
總結 BFC的結構是什麼樣的，像DOM一樣的樹狀結構，還是一個BFC集合。其實我們不需要關心BFC的具體結構，這要看瀏覽器的具體實現採用什麼樣的資料結構。對於BFC我們只需要知道使用一定的CSS宣告可以生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則可以達到一定的佈局效果，為了達到特定的佈局效果我們讓元素生成BFC。 參考文章 BFC的概念和解決外邊距合併