先看一個例子：

<div id = "header">
    <div class = "header_cap"><h1>test</h1></div>    
</div>

#header {
    width: 100%;
    height: 6rem;
    text-align: center;
    background-color: #CCC;
    overflow: hidden;
}
#header .header_cap {
    heigth: 2rem;
    margin-top
 
: 2rem;
    text-indent: -0.7rem;   

}
#header .header_cap h1 {
    font-size: 2rem;
}

在這個demo中， 如果不加overflow:hidden；那麼父元素header和子元素header_cap的margin-top就會摺疊，真正的外邊距是顯示在父元素header外的，而子元素上邊界和父元素上邊界依舊重疊，這樣顯示不出我們所要的效果。這就是所說的邊距摺疊問題了。對於margin摺疊問題，有以下常遇到的問題與解決方法。

在常規文件流中，2個或以上的塊級盒模型相鄰的垂直margin會被摺疊。最終的margin值計算方法如下：

1. 全部都為正值，取最大者；
2. 不全是正值，則都取絕對值，然後用正值減去最大值；
3. 沒有正值，則都取絕對值，然後用0減去最大值。

注意：

1. 相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關係。相鄰的盒模型中，如果其中的一個是浮動的（floated），垂直margin不會被摺疊，甚至一個浮動的盒模型和它的子元素之間也是這樣。
2. 設定了overflow屬性的元素和它的子元素之間的margin不會被摺疊（overflow取值為visible除外）。
3. 設定了絕對定位（position:absolute）的盒模型，垂直margin不會被摺疊，甚至和他們的子元素之間也是一樣。
4. 設定了display:inline-block的元素，垂直margin不會被摺疊，甚至和他們的子元素之間也是一樣。
5. 一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom摺疊。

注意：

• 如果一個盒模型的上下margin相鄰，這時它的margin可能摺疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決於它的相鄰元素的margin是否被摺疊。
• 如果元素的margin和它的父元素的margin-top摺疊在一起，盒模型border-top的邊界定義和它的父元素相同。
• 另外，任意元素的父元素不參與margin的摺疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那麼元素的border-top邊界位置和原來一樣。
• 那些已經被摺疊覆蓋的元素的位置對其他已經被摺疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置才是必需的。
• 根元素的垂直margin不會被摺疊。

解決方案：

1. 在父層div加上：overflow: hidden；
2. 把margin-top外邊距改成padding-top內邊距;
3. 父元素產生邊距重疊的邊有不為 0 的 padding 或寬度不為 0 且 style 不為 none 的 border
   父層div加： padding-top: 1px;
4. 讓父元素生成一個 block formating context，以下屬性可以實現

  float: left/right
  position: absolute
  display: inline-block/table-cell(或其他 table 型別)
  overflow: hidden/auto

1. 父層div加：position: absolute;