margin重疊的緣由及解決辦法

咱們看MDN上的一句話

塊級元素的上外邊距和下外邊距有時會合並（或摺疊）爲一個外邊距，其大小取其中的最大者，這種行爲稱爲外邊距摺疊（margin collapsing），有時也翻譯爲外邊距合併。注意浮動元素和絕對定位元素的外邊距不會摺疊。

計算的原則

• 兩個都爲正值直接去最大值;
• 兩個一正一副時, 使用正值去減去負值的絕對值;
• 兩個都爲負值時, 兩個都使用絕對值, 在使用0減去最大值。

解決辦法

• 兄弟間重疊時
  1. 底部元素變爲行內盒子(display: inline-block);
  2. 底部元素設置flot
  3. 底部元素的position的值爲absolute/fixed
• 父元素與子元素重疊
  1. 父元素加入(overflow: hidden);
  2. 父元素添加透明邊框(border:1px solid transparent);
  3. 子元素變爲行內盒子(display: inline-block);
  4. 子元素加入浮動屬性或定位