BFC詳解

　　BFC(block formating context)，翻譯過來就是塊級格式化上下文。咱們能夠理解爲：BFC就是一個Block-level Box內部的Block-level Box佈局的一系列規則。下面咱們列出將有哪些佈局規則而且舉例解釋說明。

佈局規則：

　　1. 內部的Box會在垂直方向，從頂部開始一個接一個地放置。（即每一個塊級元素獨佔一行）

　　2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加。（垂直方向上margin塌陷）

　　3. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。（規則1產生的緣由）

　　4. BFC的區域不會與float box重疊。

　　5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

　　6. 計算BFC的高度時，浮動元素也參與計算。（overflow:hidden清除浮動遠離）

如何產生BFC：

1. float 除了none之外的值

2. overflow 除了visible 之外的值（hidden，auto，scroll ）

3. display (table-cell，table-caption，inline-block, flex, inline-flex)

4. position值爲（absolute，fixed）

規則解釋說明：

　　規則2: Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加。（垂直方向上margin塌陷）

 1 <!-- 樣式 -->
 2     <style>
 3     .item {
 4         width: 100px;
 5         height: 100px;
 6         background-color: #f44;
 7         margin: 50px;
 8     }
 9 </style>
10 
11 <!-- 結構 -->
12 <div class="item"></div>
13 <div class="item"></div>

上圖中兩個元素上下都有50px的margin，可是因爲規則2，顯示出來的間隔只有50px；並無咱們像咱們想象中出現100px的間隔。這種現象叫作margin塌陷。而且當上下margin不一致時，取較大的那個值。

規則3: 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。（規則1產生的緣由）

規則4: BFC的區域不會與float box重疊。

 1 <!-- 樣式 -->
 2     <style>
 3     .aside {
 4         width: 100px;
 5         height: 100px;
 6         background-color: #f66;
 7         float: left;
 8     }
 9     
10     .main {
11         width: 300px;
12         height: 300px;
13         background-color: #fcc;
14         /*overflow: hidden;*/
15     }
16 </style>
17 
18 <!-- 結構 -->
19     <div class="container">
20         <div class="aside"></div>
21         <div class="main"></div>
22     </div>

當咱們註釋掉overflow: hidden時：此時兩個div知足規則3，與外層border相連，因爲浮動的div不佔標準文檔流位置，全部出現重疊現象；（第一幅圖）

當咱們添加上overflow: hidden時；此時class爲main的div產生BFC，不與float元素重疊，知足規則4，因此class爲main的div緊挨浮動的div。（第二幅圖）

                         

 

詳細BFC講解能夠參考：http://sentsin.com/web/529.html