外边距重叠也可以称之为外边距塌陷 如果目的是让一些元素垂直方向间距相同，那么外边距重叠用起来就真的很香，不需要再担心两者的外边距叠加问题。 外边距重叠就像字面意思一样，不同元素上下边距重叠到一起了。 官方一点解释就是：
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
一、哪些元素会发生外边距重叠问题 ？？？
从官方的解释上我们可以看到是块元素的 上下外边距 ，所以说明只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题
二、什么情况下会发生外边距重叠呢 ？？？
造成外边距重叠有 三种情况：
第一种情况：发生在同一层相邻元素之间
发生边界重叠，只会挑选最大边界范围留下，所以两者之间的边距为100px 如果需要解决这个边界重叠问题，则需在后一个元素加上float
第二种情况：没有内容将父元素和后代元素分开
从代码可以看出我们目的是想让子元素距离父元素的顶部100px，可惜结果总是在意料之外，父级会和子级移动，距离顶部100px。
那有没有什么办法让他们分开呢？
方法一：给父元素加overflow：hidden；
这种方法解决了我们外边距重叠问题，但是这个方法只适用于 “子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top<parentHeight)” ，不然子元素部分内容就会被隐藏掉
方法二：给父元素加边框 border
父子元素是外边框重叠到一起去了 ，那么我们给父元素加个边框，他们的外边距就有了边框的间距，但是这样也就多出来没有必要的边框
方法三：给父级或者子级设置display:inline-block;
既然只有块元素会产生外边距重叠，那么我们就让它不是块元素，把它设置为行内块元素
方法四：给父级或者子级设置float
方法五：给父级或者子级设置position: absolute;
方法六：给父元素添加padding
第三种情况：空的块级元素
中间的间隔只有20px,不会产生叠加，只会取最大的那个值
三、外边距重叠是怎么算的 ？？？
两个正数取最大的数
两个负数取绝对值最大的数
一正一负取两者之和
