前言
? ? 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)建一個新的塊級格式化上下文帘睦。
當一個HTML盒子元素袍患，滿足以上任一條件時坦康，就可以將其看作一個BFC。比如: 元素的float屬性不為none诡延、position不為static滞欠、overflow不為visible等等，只要滿足其中一個條件肆良，就形成了一個BFC筛璧，當然用得最多的就是設(shè)置overflow為hidden來創(chuàng)造一個BFC。
BFC的特性和應(yīng)用
? ? 了解了BFC的基本概念后惹恃，再來看看它的一些特性和常見的應(yīng)用場景夭谤。
1. 盒子邊對齊
如上圖，一個BFC盒子中的所有元素都是默認左對齊的(左至右)巫糙，無論其大小寬高沮翔，是否浮動，都是向左邊框?qū)R曲秉。
? ? 利用這個特性可以解決文字包圍圖片的問題采蚀，比如一個img和一個p標簽從左到右并排放在一起，可能就會出現(xiàn)p的文字過多跑到img的下面去承二，形成一個文字包圍圖片的情況榆鼠，而我們想要的是圖片和文字分開，這時候只要給p標簽設(shè)置一個overflow：hidden亥鸠，p標簽的文字就會乖乖地在圖片右邊框那里對齊了妆够。
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)三個元素排成了一列，浮動被清除了~~
4. 多列布局
? ? 我們平時很常見的多列布局罪裹，要求自適應(yīng)等，也可以利用BFC來實現(xiàn)运挫。最經(jīng)典的用法就是状共，左邊一個div左浮動，然后右邊一個div設(shè)置為BFC谁帕，這樣左邊元素寬度變化時峡继，右邊元素可以自適應(yīng)的變化，具體效果如下圖匈挖。
同理，也可以實現(xiàn)三列布局儡循，左元素左浮動舶吗，右元素右浮動，中間元素設(shè)置為overflow：hidden也可以實現(xiàn)自適應(yīng)择膝。這種布局可謂是一種萬能布局了誓琼，可以處理很多情景布局。
結(jié)語
? 說了這么多调榄，其實BFC也算是css的基礎(chǔ)內(nèi)容了踊赠，早在flex流行之前，它就可以做到很多布局上的效果每庆，雖說我平時不寫css但是也要對其基礎(chǔ)重要內(nèi)容重視起來，原理也要理解今穿。
