外边距合并、塌陷

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。（只上下外边距才会出现合并、塌陷，左右不会）

1.相邻块元素垂直外边距合并

当上下相邻的两个块元素（兄弟关系）相遇时。如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素、父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

两个嵌套块级元素，父元素如果没有上补白和上边框，那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠，取两者较大的值，父元素上的外边距为0，也会发生合并。（通俗来说：子元素找不到父元素的border或者padding,就会与父元素上边距重叠）

解决方案：

（1）可以为父元素定义上边框

（2）可以为父元素定义上内边距

（3) 可以为父元素添加overflow:hidden

3.外边距计算方式

　　1.两个值为正数，取较大值

　　2.两个值为负数，取绝对值较大的值

　　3.一正一负，取两个值的和

4.解决方式（父元素）

        1.border: 1px solid #fff;

　　2.float: left;

　　3.position: absolute;

　　4.padding: 1px;

　　5.display: inline-block;

　　6.overflow: hidden;

　　7.overflow: auto;