什么是BFC

BFC即Block formatting context的簡稱，它是網(wǎng)頁中的一塊渲染區(qū)域，而且它有一套進(jìn)行渲染的規(guī)則，這個(gè)規(guī)則決定了渲染區(qū)域的子元素如何布局，以及元素之間的關(guān)系和相互作用。

BFC的特點(diǎn)

• BFC渲染區(qū)域是頁面上的一個(gè)隔離的獨(dú)立區(qū)域，獨(dú)立區(qū)域里面的子元素不會影響區(qū)域外面的元素，同樣外部的元素也不會干擾區(qū)域內(nèi)部的元素。

• BFC渲染區(qū)域內(nèi)部的盒子元素會在垂直方向一個(gè)接一個(gè)放置

• BFC渲染區(qū)域不會與浮動樣式（float）的盒子疊加

• BFC渲染區(qū)域內(nèi)部的兩個(gè)相鄰盒子元素垂直方向上的外邊距（margin)會疊加

• 浮動元素參與BFC渲染區(qū)域高度的計(jì)算

如何觸發(fā)BFC

滿足以下任意一個(gè)條件就可以觸發(fā)BFC：

• 根元素即HTML元素會觸發(fā)BFC

• 使用絕對定位(absolute)和固定定位（fixed）會觸發(fā)BFC

• 使元素浮動（設(shè)置float樣式除none以外的值）會觸發(fā)BFC

• 設(shè)置display為以下屬性值會觸發(fā)BFC：flex,inline-flex,inline-block,table-cell,table-caption

• 設(shè)置overflow為以下屬性值會觸發(fā)BFC：hidden,auto,scroll(除了visible意外的值)

BFC的應(yīng)用場景

解決邊距重疊問題

在設(shè)計(jì)網(wǎng)頁時(shí)，如果想要垂直方向上的外邊距不重疊，可以通過給其中一個(gè)元素加一個(gè)父元素，并觸發(fā)父元素的BFC，這樣兩個(gè)div就不屬于同一個(gè)BFC，因?yàn)锽FC渲染區(qū)域是頁面上的一個(gè)隔離的獨(dú)立區(qū)域，所以垂直方向上的外邊距就不會重疊，這樣問題就解決了

用于自適應(yīng)兩欄布局

由于.left設(shè)置了浮動，產(chǎn)生了浮動流，導(dǎo)致兩個(gè)元素疊在了一起，觸發(fā).right的BFC來解決這個(gè)問題。

清除浮動

在父元素沒有設(shè)置height，子元素又float的情況下，父元素不會被子元素?fù)伍_。這是因?yàn)樵O(shè)置了float的元素脫離了文檔流，不在原來的父元素里了。同樣可以通過觸發(fā)父元素的BFC就可以解決這個(gè)問題。

解決高度塌陷

樣式中給父元素（parent）設(shè)置了margin：100px，但發(fā)現(xiàn)上邊距沒有出來，這時(shí)就可以通過觸發(fā)父元素的BFC來解決。