CSS中的BFC是指塊級(jí)格式化上下文，它是一個(gè)獨(dú)立的渲染區(qū)域，具有一定的上下文和隔離性。BFC可以有效地解決一些布局問題，比如外邊距合并、清除浮動(dòng)、避免父元素被子元素?fù)伍_等問題。那么如何在CSS中實(shí)現(xiàn)BFC呢？

一、常見的BFC觸發(fā)方式
1. 根元素（即html元素）
2. float屬性不為none
3. display為inline-block、table-cell、table-caption或者flex
4. position為fixed或者absolute
5. overflow不為visible
二、如何使用overflow屬性觸發(fā)BFC
如果需要觸發(fā)BFC，可以定義一個(gè)容器元素，給該元素設(shè)置一定的寬高并設(shè)置overflow為hidden、auto或者scroll。當(dāng)然，也可以給該元素設(shè)置一個(gè)比較大的padding值來(lái)達(dá)到同樣的效果。由于overflow屬性觸發(fā)的BFC會(huì)使該元素具有一定的上下文和隔離性，所以可以解決外邊距合并、清除浮動(dòng)、避免父元素被子元素?fù)伍_等問題。
三、BFC的一些應(yīng)用場(chǎng)景
1. 避免外邊距合并問題
當(dāng)兩個(gè)相鄰的元素的margin-top和margin-bottom值都設(shè)置為非0值時(shí)，無(wú)論是上面的元素的margin-bottom還是下面的元素的margin-top，最終的間距都等于兩個(gè)margin值的較大的那個(gè)值。如果我們需要使這兩個(gè)元素之間的間距等于兩個(gè)margin值的和，可以將其中一個(gè)元素放在一個(gè)BFC容器中，這樣間距就等于兩個(gè)margin值的和了。
2. 清除浮動(dòng)問題
在浮動(dòng)元素的容器中設(shè)置overflow屬性為hidden、auto或者scroll，可以清除該容器的后代浮動(dòng)元素對(duì)其高度的影響，避免出現(xiàn)高度塌陷等問題。
3. 避免父元素被子元素?fù)伍_問題
子元素設(shè)置為float或者絕對(duì)定位后，會(huì)脫離正常文檔流，不會(huì)再對(duì)父元素的高度產(chǎn)生影響，導(dǎo)致父元素的高度無(wú)法自適應(yīng)。此時(shí)可以給父元素設(shè)置overflow:hidden屬性，使其形成一個(gè)BFC，從而避免子元素對(duì)其高度的影響，父元素就可以自適應(yīng)高度了。