在css中，某些情况下，相邻的两个或多个盒模型中的margin-top会塌陷（即失效）。如：
<div id="box1">
<div id="box2">
Hello World！
</div>
</div>
#box1{
width: 200px;
height: 200px;
background-color: pink;
}
#box2{
margin-top: 50px;
background: #FFCC33;
}
在上述情况中，不会出现：
而会出现：
当以下两个条件被满足时会形成该特殊情况：
- 父元素没有任何填充物，没有内边距，没有边框
- 子元素处在父元素的顶部边缘
解决办法有如下三种：
- 使子元素的属性变为float
- 使子元素的display属性变为inline-block
- 使父元素可见（这里的可见既包括显式可见和隐式可见），如将overflow设置为auto