一、BFC定義

“塊級格式化上下文”，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box 如何布局，並且與這個區域外部毫不相幹。

二、BFC布局規則

內部的Box會在垂直方向，一個接一個的放置；

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

每個元素的margin box的左邊，與包含塊border box 的左邊相接觸（對於從左到右的格式化，否則相反）。即時浮動也是如此；

BFC的區域不會與float box 重疊；

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

計算BFC高度時，浮動元素也參與計算

三、根元素；

float不為none；

position為absolute或fixed；

display為inline-block，table-cell，table-caption，flex，inline-flex；

overflow不為visible

四、BFC應用

1. 防止垂直margin重疊

重疊情況：

html

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

css

div{
  margin: 20px auto;
}
.div1{
  background-color: red;
}
.div2{
  background-color: green;
}
.div3{
  background-color: yellow;
}

效果圖

這時，三個div的間隔都為20px，而非疊加的40px，這是因為Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box 的margin會發生重疊。我們可以再div3外面包裹一層容器，並觸發該容器生成一個BFC，那麽div1和div2就與div3不屬於同一個BFC，就不會發生重疊了。

html

<
 
div class="div1">111</div>
<div class="div2">222</div>
<div class="parent">
  <div class="div3">333</div>
</div>

css

div{
  margin: 20px auto;
}
.div1{
  background-color: red;
}
.div2{
  background-color: green;
}
.div3{
  background-color: yellow;
}
.parent{
  overflow: hidden;
}

效果圖

2. 清除內部浮動

html

<div class="parent">
  <div class="div1">111</div>
  <div class="div2">222</div>
</div>

css

.div1,.div2{
  float: left;
  width: 200px;
  height:200px;
  margin-right:20px;
}
.div1{
  background-color: red;
}
.div2{
  background-color: green;
}
.parent{
  background-color: yellow;
}

效果圖

我們可以看到，父元素其實是沒有高度的，它不會包含任何已經浮動的子元素，為了解決這個問題，可以再父元素上添加overflow:hidden，在容器中創建一個新的BFC。由於計算BFC的高度時，浮動元素也參與計算，所以父元素在計算其高度時，加入了浮動元素的高度。效果如下：

當然，在父元素上通過設置display:inline-block/table-cell、position:absolute、float:left等方式也可以創建一個BFC，已達到上面的效果。

3. 利用BFC實現自適應兩欄布局

html

  <div class="div1">111</div>
  <div class="div2">222</div>

css

.div1{
  width:300px;
  height:300px;
  float:left;
  background-color: red;
}
.div2{
  height:500px;
  background-color: green;
}

效果圖

根據BFC規則“每個元素的margin box 的左邊，都與包含border box 的左邊相接觸（對於從左到右的格式化，否則相反）。即使浮動也是如此”。因此，雖然存在浮動的元素div1，但div2的左邊依然會與包含塊的左邊相接觸。

再根據BFC布局規則“BFC的區域不會與float box 重疊”，我們可以通過觸發div2來生成BFC，實現自適應兩欄布局。只要在div2加上overflow:hidden即可達到如下效果：

參考：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

　　http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

淺談BFC