一，什么是外邊距折疊？
在CSS中，兩個或多個毗鄰的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會發生疊加，這種形成的外邊距稱之為外邊距疊加。
關鍵字：毗鄰、兩個或多個、垂直方向和普通流
毗鄰
毗鄰說明了他們的位置關系，沒有被padding、border、clear和line box分隔開。
兩個或多個
兩個或多個盒子是指元素之間的相互影響，單個元素不會存在外邊距疊加的情況。
垂直方向
只有垂直方向的外邊距會發生外邊距疊加。水平方向的外邊距不存在疊加的情況。
普通流(in flow)
只要不是float、absolutely positioned和root element時就是in flow
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.block {
width: 100px;
height: 100px;
background-color: lightBlue;
}
.top {
margin-bottom: 20px;
}
.bottom {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="block top"></div>
<div class="block bottom"></div>
</div>
</body>
</html>
如果你不了解外邊距折疊，那么你會認為：間距 = top塊的margin-bottom + bottom塊的margin-top ＝20px + 30px = 50px
然而實際情況是:
這就是外邊距折疊
二，什么時候會發生外邊距折疊？
存在兩種情況：一是父子外邊距疊加；二是兄弟外邊距疊加。
-
普通流中的塊級元素的margin-bottom永遠和它相鄰的下一個塊級元素的margin-top疊加，除非相鄰的兄弟元素clear
-
普通流中的塊級元素（沒有border-top、沒有padding-top）的margin-top和它的第一個普通流中的子元素（沒有clear）發生margin-top疊加
-
普通流中的塊級元素（height為auto、min-height為0、沒有border-bottom、沒有padding-bottom）和它的最后一個普通流中的子元素（沒有自身發生margin疊加或clear）發生margin-bottom疊加
-
如果一個元素的min-height為0、沒有border、沒有padding、高度為0或者auto、不包含子元素，那么它自身的外邊距會發生疊加
三，外邊距折疊后的大小
1.兩個相同大小的正數：取某個外邊距的值。即30px與30px發生折疊，折疊后的值為30px。
2.兩個不同大小的正數：取較大的外邊距的值。即30px與20px發生折疊，折疊后的值為30px。
3.一正一負：取正數與負數的和。即30px與-20px發生折疊，折疊后的值為10px。
4.相同大小的負數：同相同大小正數。-30px與-30px折疊，折疊后為-30px。
5.不同大小負數： 取絕對值較大的負數。-30px與-20px折疊，折疊后為-30px。
2.兩個不同大小的正數：取較大的外邊距的值。即30px與20px發生折疊，折疊后的值為30px。
3.一正一負：取正數與負數的和。即30px與-20px發生折疊，折疊后的值為10px。
4.相同大小的負數：同相同大小正數。-30px與-30px折疊，折疊后為-30px。
5.不同大小負數： 取絕對值較大的負數。-30px與-20px折疊，折疊后為-30px。
四，如何避免外邊距折疊
- 浮動元素不會與任何元素發生疊加，也包括它的子元素
- 創建了BFC的元素不會和它的子元素發生外邊距疊加
- 絕對定位元素和其他任何元素之間不發生外邊距疊加，也包括它的子元素
- inline-block元素和其他任何元素之間不發生外邊距疊加，也包括它的子元素