CSS BFC

原文：

　　[佈局概念] 關於CSS-BFC深刻理解；

　　深刻理解 BFC； - 頁面內可演示

 

BFC的概念以及通俗理解

　　通俗理解：BFC就是css佈局的一個概念，是一塊區域，一個環境。能夠簡單的理解爲某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是 BFC。

　　較官方概念：塊級格式化上下文。它是一個獨立的渲染區域，只有 Block-level box 參與（在下面有解釋）， 它規定了內部的 Block-level Box 如何佈局，而且與這個區域外部絕不相干。

　　咱們常說的文檔流其實分爲定位流、浮動流和普通流三種。而普通流其實就是指 BFC 中的 FC - formatting 。是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其餘元素之間的關係和做用。

　　常見的 FC 有 BFC、IFC（行級格式化上下文）、GFC（網格佈局格式化上下文）和FFC（自適應格式化上下文）。

 

BFC 的觸發條件：

　　下列條件只需知足其一便可：

　　【1】根元素，即HTML元素；

　　【2】float的值不爲none；

　　【3】overflow的值不爲visible；

　　【4】display的值爲inline-block、table-cell、table-caption；

　　【5】position的值爲absolute或fixed；

 

BFC 觸發後的佈局規則：

1.內部的Box會在垂直方向，一個接一個地放置。

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

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

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

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

6.計算BFC的高度時，浮動元素也參與計算。

 

BFC 的常見應用：

　　除了耳熟能詳的清除內部浮動外，還能進行頁面佈局、阻止某些狀況下發生的 margin 重疊等等，下面依次根據佈局規則進行解釋。

　　規則1：就是咱們日常div一行一行塊級放置的樣式，很少說；

　　規則2：同一個BFC的兩個相鄰Box的margin會發生重疊，見下例：

// html
<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
      

// css
.aside {
    margin-bottom: 100px;
    width: 100px;
    height: 150px;
    background-color: #f66;
}

.text {
    overflow: hidden;
}
.main {
    background-color: #fcc;
    margin-top: 100px;
    height: 200px;
}

 　　在按照如上寫法， .aside 與 .main 之間的空白區域高度是 200px，而把 .text 的樣式註釋掉，空白區域變成 100px，見下圖；

　　

　　規則3：左浮是子div的左邊接觸父 div 的 borderbox 的左邊，右浮是子 div 接觸父 div 的 borderbox 右邊，除非設置margin來撐開距離，不然一直是這個規則。見下例：

// html
<div class="par">
    <div class="child"></div>
    <div class="child"></div>
</div>

// css
.par {
    width: 300px;
    border: 10px solid #fcc;
    overflow: hidden;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    border: 10px solid #f66;
}

 

 

　　所以，一般使用的 overflow: hidden; 方法來清除浮動就是利用的 BFC 的觸發條件 3 來實現的。

 

　　規則4：BFC的區域不會與float box重疊：首先看下例子 - 自適應兩欄佈局：

// html
<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
      

// css
.aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
}

.text {
    width: 500px;
}
.main {
    height: 200px;
     /* 觸發 .main 盒子的 BFC 規則 */
    overflow: hidden;
    background: #fcc;
}

 

　　上面盒子 .aside 左浮動，所以 .main 盒子在沒有觸發 BFC 的狀況下會被覆蓋。然後來 .main 盒子觸發 BFC ，根據規則 4 ，就會顯示成兩欄佈局的樣子。

 

附上一個關於 float 的案例：

 

// html
<div class="par">
    <div class="child"></div>
    <div class="child0">123</div>
</div>


// css
.par {
    width: 200px;
    border: 10px solid #fcc;
}

.child {
   float: left;
   width: 100px;
   height: 100px;
   border: 3px solid #f66;
}
.child + div {
   border: 3px solid #000;
}