CSS 之 BFC

BFC 的概念：

            BFC 直譯爲「塊級格式化上下文」，它是一個獨立的渲染區域，只有 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 的佈局規則：

            一、獨立渲染區域內的 Block-level-box 會在垂直方向上，一個接一個的排列；

            二、Block-level-box 在垂直方向上的距離由 margin 決定，屬於同一個 BFC 的兩個相鄰 Block-level-box 的 margin 會發生重疊；

            三、每一個 Block-level-box 的左外邊距都會與獨立渲染區域的左邊框相重疊；

            四、BFC 生成的獨立渲染區域不會與 float box 相重疊；

            五、計算獨立渲染區域高度時，浮動元素也參與計算；

BFC 的做用：

            一、清除浮動

            二、防止 margin 重疊

            三、多欄佈局

一、清除浮動

具體示例：
<div id="container">
        <div class="item"></div>
        <div class="item"></div>
</div>

#container {
        border: 1px solid red;
        width: 500px;
}
#container .item {
        width: 200px;
        height: 200px;
        float: left;
        border: 1px solid blue;
}
PS：在這種狀況下 container 的高度不會被自動撐開；咱們能夠經過觸發 container 生成 BFC，當 container 生成 BFC 後，浮動元素會參與高度的計算從而使 container 的高度自動撐開。
#container {
        width: 500px;
        overflow: hidden;
        border: 1px solid red;
}

二、防止 margin 重疊

具體示例：
<div class="item"></div>
<div class="item"></div>

 .item {
        width: 200px;
        height: 200px;
        margin: 20px;
        background: #000;
}
PS：兩個塊級元素垂直方向上的距離爲 20px，即在垂直方向上塊級元素的 margin 會發生重疊。屬於同一個 BFC 的兩個相鄰 Block-level-box 的 margin 發生了重疊。咱們能夠在其中一個 div 的外面再包裹一層容器，並觸發該容器生成一個 BFC。那麼這兩個 div 便不屬於同一個 BFC 就不會發生 margin 重疊了。

<div id="container">
        <div class="item"></div>
</div>
<div class="item"></div>
#container {
        overflow: hidden;
        border: 1px solid red;
}
 .item {
        width: 200px;
        height: 200px;
        margin: 20px;
        background: #000;
}

三、多欄佈局

具體示例：
<div id="container">
        <div class="left"></div>
        <div class="right"></div>
</div>

#container {
        width: 600px;
        position: relative;
}
#container .left {
        width: 200px;
        height: 300px;
        float: left;
        background: red;
}
#container .right {
        height: 400px;
        background: bule;
}
PS：根據 BFC 佈局規則：BFC 的區域不會與 float box 相重疊。因此咱們能夠經過觸發右側的 div 生成 BFC，來實現自適應兩欄佈局，即左欄寬度固定，右欄能夠根據瀏覽器寬度自適應。
#container .right {
        height: 400px;
        background: bule;
        overflow: hidden;
}

PS：在 CSS2 中有 BFC 和 IFC 的概念，CSS3 中新增了 FFC 和 GFC。