揭開CSS中BFC的面紗
引言：
這篇文章是我對BFC的理解及總結，帶你揭開BFC的面紗。你將會知道BFC是什麽，形成BFC的條件，BFC的相關特性，以及他的實際應用。
一、何為BFC
BFC（Block Formatting Context）格式化上下文，是Web頁面中盒模型布局的CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。
二、形成BFC的條件
1、浮動元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 為以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
三、BFC的特性
1.內部的Box會在垂直方向上一個接一個的放置。
2.垂直方向上的距離由margin決定
3.bfc的區域不會與float的元素區域重疊。
4.計算bfc的高度時，浮動元素也參與計算
5.bfc就是頁面上的一個獨立容器，容器裏面的子元素不會影響外面元素。
看到這裏是不是有丈二和尚摸不著頭腦的感覺，下面我就用案例來幫助理解認識：
四、實踐是檢驗真理的唯一標準
（1）BFC中的盒子對齊
特性的第一條是：內部的Box會在垂直方向上一個接一個的放置。
浮動的元素也是這樣，box3浮動，他依然接著上一個盒子垂直排列。並且所有的盒子都左對齊。
布局：
<div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div>
css:
div { height: 20px; } .container{ position: absolute; /* 創建一個BFC環境*/ height: auto; background-color: #eee; } .box1 { width: 400px; background-color: red; } .box2 { width: 300px; background-color: green; } .box3 { width: 100px; background-color: yellow; float: left; } .box4 { width: 200px; height: 30px; background-color: purple; }
（2）外邊距折疊
特性的第二條：垂直方向上的距離由margin決定
在常規文檔流中，兩個兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個外邊距之和，而是以較大的為準。
布局：
<div class="container"> <div class="box"></div> <div class="box"></div> </div>
css：
.container { overflow: hidden; width: 100px; height: 100px; background-color: red; } .box1 { height: 20px; margin: 10px 0; background-color: green; } .box2 { height: 20px; margin: 20px 0; background-color: green; }
這裏我門可以看到，第一個子盒子有上邊距（不會發生margin穿透的問題）；兩個子盒子的垂直距離為20px而不是30px，因為垂直外邊距會折疊，間距以較大的為準。
那麽有沒有方法讓垂直外邊距不折疊呢？答案是：有。特性的第5條就說了：bfc就是頁面上的一個獨立容器，容器裏面的子元素不會影響外面元素，同樣外面的元素不會影響到BFC內的元素。所以就讓box1或box2再處於另一個BFC中就行了。
布局：
<div class="container"> <div class="wrapper"> <div class="box1"></div> </div> <div class="box2"></div> </div>
css：
.container { overflow: hidden; width: 100px; height: 100px; background-color: red; } .wrapper { overflow: hidden; } .box1 { height: 20px; margin: 10px 0; background-color: green; } .box2 { height: 20px; margin: 20px 0; background-color: green; }
（3）不被浮動元素覆蓋
以常見的兩欄布局為例。
左邊固定寬度，右邊不設寬，因此右邊的寬度自適應，隨瀏覽器窗口大小的變化而變化。
布局：
<div class="column"></div> <div class="column"></div>
css：
.column:nth-of-type(1) { float: left; width: 200px; height: 300px; margin-right: 10px; background-color: red; } .column:nth-of-type(2) { overflow: hidden;/*創建bfc */ height: 300px; background-color: purple; }
還有三欄布局。
左右兩邊固定寬度，中間不設寬，因此中間的寬度自適應，隨瀏覽器的大小變化而變化。
布局：
<div class="contain"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
css：
.column:nth-of-type(1), .column:nth-of-type(2) { float: left; width: 100px; height: 300px; background-color: green; } .column:nth-of-type(2) { float: right; } .column:nth-of-type(3) { overflow: hidden; /*創建bfc*/ height: 300px; background-color: red; }
也可以用來防止字體環繞：
眾所周知，浮動的盒子會遮蓋下面的盒子，但是下面盒子裏的文字是不會被遮蓋的，文字反而還會環繞浮動的盒子。這也是一個比較有趣的特性。
布局：
<div class="left"></div> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>
css：
（1）環繞
.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; /* overflow: hidden; */ }
（2）利用bfc防止環繞
.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; overflow: hidden; }
（4）BFC包含浮動的塊
這個是大家再熟悉不過的了，利用overflow:hidden清除浮動嘛，因為浮動的盒子無法撐出處於標準文檔流的父盒子的height。這個就不過多解釋了，相信大家都早已理解。
總結
我希望這篇文章已經向你展示了BFC的相關特性，以及他們如何影響元素在頁面上的視覺定位。所有的例子都展示了它們在實際案例中的應用，這應該會使得他們更加清晰。
如果你有任何東西想要補充，請在評論中留言，歡迎共同討論。
揭開CSS中BFC的面紗