当使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

外边距塌陷有两种情况：

第一种：两个同级元素，垂直排列,上面的盒子给margin-bottom 下面的盒子给margin-top，那么他们两个的间距会重叠，取两个值中的那个较大的值计算，这种现象被称为相邻的块级元素垂直外边距的合并。

第二种：两个父子元素,内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

(1) 相邻块元素垂直外边距塌陷
解决方案： 尽量给只给一个盒子添加margin值。

(2) 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

父元素的上外边距会与子元素的上外边距发生合并

合并后的外边距为两者中的较大者

解决方案：
1.给父元素定义上边框(border)
2.给父元素定义上内边距(padding值)
3.给父元素添加overflow.hidden。
4.利用伪元素给父元素的前面添加一个空元素 ::before{content'';display:table;}
5.给父元素添加position：fixed；
还有其他方法，比如浮动,绝对定位的盒子不会有塌陷问题。