前言

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

什么是BFC？

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

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

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

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

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

1. 盒子邊對(duì)齊

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

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

2. 外邊距重疊

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

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

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

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

一般情況，父元素沒(méi)有高度

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

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

BFC的情況，父元素被撐開(kāi)

4. 多列布局

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

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

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

結(jié)語(yǔ)

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