会导致外边距塌陷的两种情况
情况一：两个兄弟盒子，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top,实际中会取值较大的那个属性值显示在网页中。这种情况一般较为少见。这两个属性只设置一个即可解决。
情况二：嵌套盒子（父元素与子元素）间的外边距塌陷（发生在垂直方向上的外边距合并，注意是垂直方向）
解决情况二的外边距塌陷一共有三种方法
方法一：给父元素加边框border
方法二：给父元素加内边距padding以达到类似效果
方法三：给父元素设置overflow:hidden;