一、现象解释
指对于嵌套关系的块元素，若父子双方均有外边距则父元素会塌陷较大的外边距（通俗解释：就是父子均按照最大的外边距进行移动）
tips:谁大塌陷多少
eg：
<style>
.father{
width:500px
height:500px
background-color:rgb(15,213,240)
margin-top:100px
}
.son{
width:300px
height:300px
background-color:rgb(14,71,226)
margin-top:50px
}
</style>
<body>
<divclass="father">
<divclass="son">
</div>
</div>
</body>
二、解决方案
1.加一个透明的边框
即：加一个border: 1px solid transparent
<style>
.father{
width:500px
height:500px
background-color:rgb(15,213,240)
margin-top:100px
border:1pxsolidtransparent
}
.son{
width:300px
height:300px
background-color:rgb(14,71,226)
margin-top:50px
}
</style>
<body>
<divclass="father">
<divclass="son">
</div>
</div>
</body>
2.给父元素加一个内边距
即：padding：1px
<style>
.father{
width:500px
height:500px
background-color:rgb(15,213,240)
margin-top:100px
padding:1px
}
.son{
width:300px
height:300px
background-color:rgb(14,71,226)
margin-top:50px
}
</style>
<body>
<divclass="father">
<divclass="son">
</div>
</div>
</body>
3.给父元素加一个overflow：hidden
4.其他
解决办法：第一种：可以在父盒子设置边框，在.father{}里边加边框 类似border:1px solid green此时margin将会相对于父盒子进行定位。
第二种：在父盒子设置overflow为hidden，即在.father{}里边加一句 overflow:hidden
第三种：可以在父盒子设置padding
这是一个经典的问题 “垂直外边距叠加” 块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。 发生外边距塌陷的三种基本情况:相邻的兄弟姐妹元素 毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要 清除过去的浮动 ）。例如： 这个段落的下外边距被合并......这个段落的上外边距被合并。 可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。块级父元素与其第一个/最后一个子元素 如果块级父元素中，不存在 上边框 、 上内补 、inline content、 清除浮动 这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。 类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有父元素的 border 、 padding 、inline content、 height 、 min-height 、 max-height 分隔时，就会发生 下外边距合并 现象。空块元素 如果存在一个空的块级元素，其 border 、 padding 、inline content、 height 、 min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如： 这个段落的和下面段落的距离将为20px这个段落的和上面段落的距离将为20px，当以上情形同时出现时，外边距合并会更加复杂（会比较两个以上外边距来最终计算出真实的边距值）。 即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。 当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。 如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。 浮动 及 绝对定位 元素外边距不会合并。
