先說說FC，FC的含義就是Fomatting Context。它是CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。BFC和IFC都是常見的FC。

Block level 的box會參與形成BFC，比如display值為block，list-item,table的元素。

Inline-level的box會參與形成IFC，比如display為inline,inline-table,inline-block的元素。

BFC

BFC原理

• 內部的盒子會在垂直方向，一個個地放置；
• 盒子垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
• 每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
• BFC的區域不會與float重疊；
• BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之也如此；
• 計算BFC的高度時，浮動元素也參與計算。

哪些元素會產生BFC

• 根元素；
• float的屬性不為none；
• position為absolute或fixed；
• display為inline-block，table-cell，table-caption，flex；
• overflow不為visible

BFC使用場景

自適應兩欄佈局

我們先定義兩個div：

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

然後定義css：

div {
  width:300px;
}
.aside {
  width: 100px;
  height: 150px;
  float: left;
  background: black;
}
.main {
  height:200px;
  background-color:red;
}

效果：

這正滿足了規範的第三條：每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此。 所以如果我們需要將黑色區域撐到紅色的左邊，就需要利用規範的第四條：BFC的區域不會與float重疊。 也就是說我們需要創造BFC區域。我們通過將紅色區域的overflow設為hidden來觸發BFC：  

.main {
  overflow:hidden;
  height:200px;
  background-color:red;
}

效果：

清除內部浮動

首先是父div套子div

<div class="parent">
  <div class="child"></div>
</div>

然後css：

.child {
  border:1px solid red;
  width:100px;
  height:100px;
  float:left;
}
.parent {
  border:1px solid black;
  width:300px;
}

效果：

可以看到，父div壓根就沒有被撐開。

我們再回顧一下BFC規範中的第六條：

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

所以我們需要將父div觸發為BFC，也就是將其overflow設為hidden：

.parent {
  border:1px solid black;
  width:300px;
  overflow:hidden;
}

 效果：

可以看到父div已經撐開了。

margin重疊

先定義兩個垂直的div：

<div class="p"></div>
<div class="p"></div>

然後定義margin:

.p {
  width:200px;
  height:50px;
  margin:50px 0;
  background-color:red;
}

可以看到margin重疊後的效果：

我們再看看BFC規範的第二條：盒子垂直方向的距離由margin決定，屬於用一個BFC的兩個相鄰Box的上下margin會發生重疊。 說明兩者屬於同一個BFC，所以我們需要兩個div不屬於同一個BFC。

為第二個div套一個父親div，然後講其overflow設為hidden來啟用一個BFC就可以使margin不再重疊。

<div class="p"></div>
<div class="wrap">
  <div class="p"></div>
</div>

.wrap {
  overflow:hidden;
}

效果：

 IFC佈局規則

• 框會從包含塊的頂部開始，一個接一個地水平擺放。
• 擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所佔用的空間都會被考慮在內。在垂直方向上，這些框可能會以不同形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文字基線對齊。能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。
• 行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。  

主要影響IFC內佈局的css：

• font-size
• line-height
• height
• vertical-align