本次，我們來講解 CSS 中的一個重要概念 BFC。

　　BFC 為 Block Formatting Context 的縮寫，中文翻譯為塊格式上下文。是什么意思呢?

　　在學(xué)習(xí) CSS 邊距的時候，我們曾經(jīng)講過一個 margin 塌陷的問題：相鄰塊元素垂直邊距和嵌套塊元素垂直邊距鄰接時邊距會合并，最終邊距等于兩個 margin 值最大的那個。

　　實際上，瀏覽器解析邊距合并的規(guī)則是由 W3C 制定的。翻閱 W3C 的官網(wǎng)，我們看到這樣一段內(nèi)容，它描述了一個叫做塊格式上下文的規(guī)則，我們把這個規(guī)則簡稱為 BFC。如果一個元素觸發(fā)了BFC 規(guī)則，我們也可以稱他為 BFC 區(qū)域。

　　根據(jù)規(guī)則的描述我們得知，一個BFC區(qū)域和另一個BFC區(qū)域是相互獨立且不會影響的。也就是說，如果容器內(nèi)部的子元素出現(xiàn)了上下邊距，邊距不會跑到外面去影響其他元素，而是在內(nèi)部拉開距離。這就使得父元素變成了一個獨立的區(qū)域。

　　BFC 規(guī)則還有一個非常重要的特點，就是如果元素被觸發(fā)了BFC規(guī)則，那么瀏覽器在計算這個元素高度的時候，會把浮動元素也考慮進(jìn)去。這樣一來，無論你有多少個浮動元素，都不用擔(dān)心父元素沒有高度了。

　　如此看來，BFC還是給我們帶來不少好處的。那如何觸發(fā)元素的BFC規(guī)則呢?

　　其實辦法有很多，例如給元素增加浮動;給元素增加了絕對定位;改變元素的類型為 inline-block ;改變元素的 overflow 樣式，只要這個值不等于默認(rèn)值，就可以。

　　而在這些方法當(dāng)中，最常用的就是overflow屬性了。無論是浮動、定位或者更改元素類型，都有可能大幅度的影響頁面布局，而 overflow 這個屬性則沒有這方面的問題。

　　還記得咱們之前學(xué)過的如何消除浮動的影響嗎?現(xiàn)在你應(yīng)該明白了，為什么我在解決父元素高度塌陷的時候，寫上一個 overflow: hidden 了。

上一篇

CSS邊距怎么設(shè)置

下一篇

cookie和session的跨域怎么解決