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. 子元素加入浮动属性或定位