问题描述：当为子盒子设置margin时，并没有将父盒子top撑开，而是子盒子与父盒子的top重合。其实这是因为margin传递问题产生的，且只会出现在嵌套结构中，只有margin-top才会有传递问题。
html
<div id="box1">
<div id="box2"></div>
</div>
css
#box1{
width: 200px;
height: 200px;
background: #ffa0df;
box-sizing: border-box;
}
#box2{
width: 100px;
height: 100px;
background: #96ff38;
margin: 50px;
}
预期效果
塌陷效果
解决方法
方法一：不给子盒子添加margin，而是为父盒子添加padding
css
#box1{
width: 100px;
height: 100px;
background: #ffa0df;
box-sizing: border-box;
padding-top: 20px;
}
#box2{
width: 50px;
height: 50px;
background: #96ff38;
/*margin-top: 20px;*/
}
效果图
方法二：为父盒子添加边框
css
#box1{
width: 100px;
height: 100px;
background: #ffa0df;
box-sizing: border-box;
border:1px solid black;
}
#box2{
width: 50px;
height: 50px;
background: #96ff38;
margin-top: 20px;
}
方法三：给父盒子添加overflow: hidden;
方法四：给父盒子添加display: table;
方法五：给父盒子添加position: fixed;
如果有错误或着不好的地方，请联系我修改。如果觉得对你有用，就点个赞吧，谢谢。
