【解析】

问题简答

外边距重叠是指两个【垂直】 【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）

根据W3C文档的说明，当符合以下条件时，就会触发外边距重合

1.都是普通流中的元素且属于同一个 BFC
2.没有被 padding、border、clear 或非空内容隔开
3.两个或两个以上垂直方向的「相邻元素」

相邻元素包括父子元素和兄弟元素重叠后的margin计算

1.margin都是正值时取较大的margin值

2.margin都是负值时取绝对值较大的，然后负向位移。

3.margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加

边距重叠详解及解决方案

1、嵌套块（父子）元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有padding-top及border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决办法

1.为父元素定义1px的border-top或padding-top。
2.为父元素添加overflow:hidden。
3.子元素或父元素设置display:inline-block。
4.父元素加前置内容（::before）生成。（推荐）

2、相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）

当上下相邻的两个块元素相遇时，如果

1.上面的元素有下外边距margin-bottom，
2.下面的元素有上外边距margin-top，

则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

解决办法

1.为了达到想要的间距，最好在设置margin-top/bottom值时统一设置上或下；

2.或者用以下的BFC解决，下面有详解