BFC

 

BFC 是什麼

        FC( formatting context ) 格式化上下文，是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。

        BFC( block formatting context ) 塊級格式化上下文， 它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

如何觸發BFC

       一、float屬性不爲none

       二、position爲absolute或fixed

       三、display爲inline-block, table-cell, table-caption, flex, inline-flex

       四、overflow不爲visible

BFC 的做用

       一、清理浮動

        代碼：

浮動清理前

        結果：

        

       清理浮動：

      1） 添加代碼：

.wrapper{
        overflow:hidden;  
}

       結果（父級依舊爲塊級block）：

       

       2) 添加代碼：

.wrapper{
    float: left;
}
/*或者*/

.wrapper{
    position: absolute;
}

/*或者*/

.wrapper{
    display: inline-block;
}

        結果（父級爲 inline-block）：

        

         緣由是塊級元素設置了  float:left/right;  或者  position:absolute/fixed； 後， 內部會把塊級元素轉換爲 display:inline-block; 

 

注意：

        在爲了解決問題而添加 BFC規則時，須要根據實際狀況慎重選擇合適的方法觸發，好比上面的清理浮動，若是父級盒子必須爲block, 就最多隻能選擇 overflow:hidden;  可是有時候子元素須要超出父元素，這時就不能用 overflow:hidden;  若是父元素又要爲block 又要子元素超出父元素，這時就能夠使用 僞元素 ::after來解決(http://www.javashuo.com/article/p-oqjbybgy-du.html)。