css之BFC機制

一，BFC定義，

全稱，block formatting content,格式化上下文；是web頁面中盒模型佈局中的css渲染模式，是一個獨立的渲染區域或說一個隔離的獨立容器。

二，造成條件

1，浮動元素，float除none之外的值。
2，定位元素，position(absolute，fixed)
3,display爲inline-block,table-cell,table-caption(相似於表格標題標籤caption)
4，overflow除visible之外(scroll,hiddle,auto)的值.

三，特性

1，內部的BOX會在垂直方向一個接着一個放。
解釋：即便不在BFC的內的盒子也是同樣的。
2，垂直方向的距離由margin值決定。
解釋：正常文檔流中，盒子的垂直距離也是由上下盒子的最大margin決定的。
應用：所以能夠用overflow:hidden觸發BFC機制，將該屬性加載父元素上。扯個題外話，用空標籤也是能解決外邊距合併問題。
3，BFC區域內的元素不會和float元素重疊，
解釋：不會被浮動元素覆蓋
應用：
兩欄佈局：左邊固定，右邊自適應佈局。

float: left; width: 200px;height: 300px;（左邊元素）
overflow: hidden;/*建立bfc */height: 300px;（右邊元素）

三欄佈局（聖盃佈局）左右兩邊固定寬度，中間不設寬，所以中間的寬度自適應。

float: left; width: 100px; height: 300px;（左邊元素）
float: right; width: 100px; height: 300px;（右邊元素）
overflow: hidden;/*建立bfc*/ height: 300px;（中間元素）

4,計算bfc的高度時，浮動元素也參與計算。
解釋:BFC包含浮動的塊。
應用：利用overflow:hidden清除浮動嘛，由於浮動的盒子沒法撐出處於標準文檔流的父盒子的height。
5，BFC就是頁面上的一個獨立容器，容器裏面的子元素不會影響外面元素。
應用：解決外邊距合併問題。

<div class="container">
        <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </div>

.container { 
                overflow: hidden; 
                width: 100px; 
                height: 100px;
            } 
.wrapper {      
            overflow: hidden;
         } 
.box1 { 
        height: 20px; 
        margin: 10px 0;
      } 
.box2 { 
        height: 20px; 
        margin: 20px 0; 
      }