外边距塌陷原因和解决方式

概念

　　外边距塌陷也称外边距合并，在文档流中相邻（兄弟或父子关系）的块级元素的外边距组合在一起变成单个外边距，只有在上下外边距才会出现塌陷，左右不会出现。

　　解析：1.两个嵌套块级元素，父元素如果没有上补白和上边框，那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠，取两者较大的值，父元素上的外边距为0，也会发生合并。

　　　　  （通俗来说：子元素找不到父元素的border或者padding,就会与父元素上边距重叠）

　　　　     2.两个相邻块级元素，如果上面的元素存在外边距margin-bottom,下面的元素存在外边距margin-top, 那么它们之间外边距不是margin-bottom + margin-top, 而是取两者最大值外边距

 

外边距计算方式

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

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

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

解决方式（父元素）

　　1.border: 1px solid #fff;

　　2.float: left;

　　3.position: absolute;

　　4.padding: 1px;

　　5.display: inline-block;

　　6.overflow: hidden;

　　7.overflow: auto;