1. BFC (Block formatting contexts)
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。
以下這些元素，會為他們的內容創建新的 BFC。
- 浮動元素
- 絕對定位元素
- 非塊級盒子的塊級容器（如
inline-blocks,table-cells, 和table-captions）overflow值不為“visiable”的塊級盒子
2. margin 的折疊
在 CSS 中，相鄰的兩個盒子（可能是兄弟關系，可能是父子關系）的外邊距可以合并為一個單獨的外邊距，即外邊距的折疊。
要求：
- 處于常規文檔流的塊級盒子，且處于同一個
BFC中。 - 沒有線盒，沒有空隙，沒有
padding和border將他們分隔開。 - 都屬于垂直方向上相鄰的外邊距。
效果：
- 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
例子一：正常文檔流中折疊外邊距
.orange {
background: orange;
width: 100px;
height: 100px;
margin: 10px;
}
.purple {
background: purple;
width: 200px;
height: 200px;
margin: 20px;
}
.gray {
background: gray;
width: 100px;
height: 100px;
margin: 20px;
}
<div class="orange"></div>
<div class="purple"></div>
<div class="grey"></div>
橘色塊`margin:10;`，紫色塊和灰色塊`margin:20;`
例子二：元素塊之間有 border 隔離時 margin 不折疊
給上面的 CSS 加如下樣式：
.wrap {
border: 1px solid black;
}
<div>
<div class="wrap">
<div class="orange"></div>
</div>
<div class="wrap">
<div class="purple"></div>
</div>
<div class="wrap">
<div class="gray"></div>
</div>
</div>
外邊距并沒有折疊
3. 浮動和絕對定位不與任何元素產生 margin 折疊
因為元素會脫離文檔流，會創建一個新的BFC。
但是浮動元素脫離了當前的BFC并不影響它后面的兄弟元素，后面的兄弟元素與浮動元素前面的元素依然在同一個BFC當中，所以，它們之間的margin還是會折疊的。
例子三：浮動元素不影響同一個BFC 里的元素 margin 折疊
.wrapper {
width: 500px;
height: 450px;
border: 1px solid red;
}
.big-box {
width: 120px;
height: 120px;
margin: 20px;
background: #1E90FF;
}
.middle-box {
width: 100px;
height: 100px;
margin: 30px;
background: #ffcf14;
}
.small-box {
width: 100px;
height: 50px;
margin: 10px;
background: #8bc528;
}
.floatL {
float: left;
}
.clear {
clear: both;
}
<div class="wrapper">
<div class="big-box">one non-float</div>
<div class="middle-box floatL">
two float-left
</div>
<div class="small-box">three non-clear-float</div>
</div>
綠色塊沒有清除浮動時，按正常情況合并外邊距
例子四：有空隙（clearance）時，會阻止外邊距合并
什么時候會產生空隙？
清除浮動的元素(即設置了 clear 屬性的元素) ,會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。
該空隙會阻止元素margin-top的折疊，并作為間距存在于元素的margin-top的上方。
如果清除綠色塊周圍的浮動，將綠色塊的 html 改為：
<div class="small-box clear">three clear-float</div>
效果如下：
清除浮動元素的`border-top`會緊貼相應的浮動元素的`margin-bottom`
4. inline-block元素與其兄弟元素、子元素和父元素的外邊距都不會折疊（包括其父元素和子元素）
因為塊級盒子的display屬性必須是以下三種之一：block， list-item， 和 table。
