概念：

外边距塌陷也称为外边距合并 是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距 组合在一起变成单个外边距
不过只有上下外边距才会有塌陷 左右外边距不会出现这种问题

对于两个嵌套关系的块元素 如果父元素没有上内边距（padding）或边框（border） 则父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者
因此可以整理出——

当外边距塌陷时外边距之间的计算方式：

1、若两个值都是正数 则取较大的值
2、若两个值都是负数 则取绝对值较大的值
3、若一正一负 则取两个值的和

相邻块元素垂直外边距的合并：
当上下相邻的两个块元素相遇时 如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top 则他们之间的垂直间距不是margin-bottom与margin-top之和 而是两者中的较大者
这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

嵌套块元素垂直外边距的合并：
对于两个嵌套关系的块元素 如果父元素没有上内边距及边框 则父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者
即使父元素的上外边距为0 也会发生合并

解决方法（父元素中加入）：

解决方法1：1px solid transparent
解决方法2：float: left
解决方法3：position: absolute
解决方法4：padding: 1px
解决方法5：display: inline-block
解决方法6：overflow: hidden
解决方法7：overflow: auto