概念
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
1.元素的下边距和下方元素的上边距合并
当一个元素出现在另一个元素之上时，第一个元素的下边距会和第二个元素的上边距发生合并
2.元素的上下边距和父元素的上下边距合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），他们的上下外边距也会合并
3.空元素上下边距合并
假设有一个空元素，有外边框没有边框或填充，这样情况下，他的上下边距就会合并在一起
解决办法
边界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。
补充解决方案：
1.外层padding
2.透明边框border:1pxsolidtransparent;
3.绝对定位postion:absolute:
4.外层DIV overflow:hidden;
5.内层DIV 加float:left;display:inline;
6.外层DIV有时会用到zoom:1;
如果一个盒模型的上下margin相邻，这时它的margin可能折叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否被折叠。
a、如果元素的margin和它的父元素的margin-top折叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
注意，那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。
根元素的垂直margin不会被折叠。
1.设置了的overflow属性的盒模型，则其与子元素之间的垂直margin不会合并，但其与父元素之间、与相邻元素之间的margin会合并。（overflow取值为visible除外）
2.设置了float属性的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。
3.设置了绝对定位position:absolute的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。（但应注意position:absolute对其后元素的position的影响）
- 设置了display:inline-block的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。
相邻元素的margin是否被折叠会影响元素的位置
防止外边距合并解决方案：
1.防止元素与子元素margin重叠：
- 用子元素的margin通过父元素的padding代替
- 子元素透明边框 border:20px solid transparent/父元素background-color;
- 父元素 overflow:hidden;/overflow:auto;
2.防止元素与子元素、与父元素。与相邻元素的重合：
- 设置元素绝对定位 postion:absolute;
- 或float:left;
- 或display:inline-block;