前言

? ? css一直不是我的強項，這也是我第一篇css相關(guān)的文章，雖然我平時css寫的比較少，但其中比較重要的基礎(chǔ)的東西還是需要理解的，比如BFC、流、浮動等；還是有必要mark下的。

什么是BFC？

? ??BFC(Block Formatting Context)直譯過來就是塊格式化上下文，可以看做是一種Web頁面中盒模型布局的CSS渲染模式，定位體系屬于常規(guī)文檔流，設(shè)置了某些樣式后的元素，就可以創(chuàng)建一個新的BFC。

浮動，絕對定位元素，inline-blocks,table-cells,table-captions,和overflow的值不為visible的元素，（除了這個值已經(jīng)被傳到了視口的時候）將創(chuàng)建一個新的塊級格式化上下文。

當(dāng)一個HTML盒子元素，滿足以上任一條件時，就可以將其看作一個BFC。比如: 元素的float屬性不為none、position不為static、overflow不為visible等等，只要滿足其中一個條件，就形成了一個BFC，當(dāng)然用得最多的就是設(shè)置overflow為hidden來創(chuàng)造一個BFC。

BFC的特性和應(yīng)用

? ? 了解了BFC的基本概念后，再來看看它的一些特性和常見的應(yīng)用場景。

1. 盒子邊對齊

如上圖，一個BFC盒子中的所有元素都是默認(rèn)左對齊的(左至右)，無論其大小寬高，是否浮動，都是向左邊框?qū)R。

? ? 利用這個特性可以解決文字包圍圖片的問題，比如一個img和一個p標(biāo)簽從左到右并排放在一起，可能就會出現(xiàn)p的文字過多跑到img的下面去，形成一個文字包圍圖片的情況，而我們想要的是圖片和文字分開，這時候只要給p標(biāo)簽設(shè)置一個overflow：hidden，p標(biāo)簽的文字就會乖乖地在圖片右邊框那里對齊了。

2. 外邊距重疊

? ? 在一個BFC盒子中，會導(dǎo)致元素之間的外邊距重疊，參考下面的一個例子。

Box是一個BFC盒子，它內(nèi)部的Sibing元素設(shè)置了樣式margin: 10px 0。按道理，兩個子元素之間的垂直距離應(yīng)該是20px，但實際上是10px，這就是發(fā)生了margin重疊，它會取margin中的最大的一個值而不會疊加。解決這種情況的方法也簡單，只要再創(chuàng)造一個BFC，把第二個元素放到第二個BFC中，BFC之間就不會發(fā)生這種外邊距重疊了。

3. 包含浮動元素(清除浮動)

一般情況下：假設(shè)一個div，里面包含了一個浮動的子元素，那么這個子元素將脫離頁面的常規(guī)流；并且父元素div不會被撐開，沒有height高度。

一般情況，父元素沒有高度

BFC的情況下： 給父元素div設(shè)置一個overflow：hidden使其成為BFC盒子，這個時候父元素div就有高度了，它的子元素也回到了常規(guī)流之中。

BFC還可以用來清除浮動，在示例html上寫三個三個float: left的元素，那么自然三個元素為排成一排。接著我們給每個浮動元素加一個div父元素，樣式寫上一條overflow：hidden，會發(fā)現(xiàn)三個元素排成了一列，浮動被清除了~~

BFC的情況，父元素被撐開

4. 多列布局

? ? 我們平時很常見的多列布局，要求自適應(yīng)等，也可以利用BFC來實現(xiàn)。最經(jīng)典的用法就是，左邊一個div左浮動，然后右邊一個div設(shè)置為BFC，這樣左邊元素寬度變化時，右邊元素可以自適應(yīng)的變化，具體效果如下圖。

左邊元素寬度變化，右邊元素自適應(yīng)

同理，也可以實現(xiàn)三列布局，左元素左浮動，右元素右浮動，中間元素設(shè)置為overflow：hidden也可以實現(xiàn)自適應(yīng)。這種布局可謂是一種萬能布局了，可以處理很多情景布局。

結(jié)語

? 說了這么多，其實BFC也算是css的基礎(chǔ)內(nèi)容了，早在flex流行之前，它就可以做到很多布局上的效果，雖說我平時不寫css但是也要對其基礎(chǔ)重要內(nèi)容重視起來，原理也要理解。