情况介绍：
当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致，两个盒子同时下来。
示例代码：
<style>
*{
margin: 0px;
padding: 0px;
}
#father{
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #5f79ff;
}
#son{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: #9d4c48;
}
</style>
<title>盒子模型示例</title>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>效果如图：
当添加margin-top属性给子盒子后：
<style>
*{
margin: 0px;
padding: 0px;
}
#father{
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #5f79ff;
}
#son{
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: #9d4c48;
/*添加margin-top属性导致父盒子也发生移动*/
margin-top: 50px;
}
</style>效果如图：
不难看出，父盒子也同时向下移动50px！
解决办法：
- 给父盒子添加1px的padding-top； 会导致父盒子结构多余1px padding；
- 给父盒子添加1px的border-top； 同样会导致1px的多余空间；
- 给父盒子或者子盒子添加浮动。可能出现由于浮动，影响页面的布局的情况；
- 给父盒子添加overflow属性(overflow:hidden)； 推荐！
代码如下：
<style>
* {
margin: 0px;
padding: 0px;
}
#father {
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #5f79ff;
overflow: hidden;
}
#son {
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: #9d4c48;
/*添加margin-top属性导致父盒子也发生移动*/
margin-top: 50px;
}
</style>效果如下：
通过给父盒子添加overflow:hidden属性,使问题的得以解决!
Programming is an art form.
下一节将会详细讲解灵活布局(弹性盒子)。