<head>
<title></title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#father
{
width: 500px;
height: 400px;
background: pink;
border: 1px solid;
}
#child
{
width: 100px;
height: 50px;
margin-top: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="father">
<div id="child">
</div>
</div>
</body>
给子div添加margin-top: 20px，发现父子DIV都一起相对BODY下移了20PX，为何不是只是子DIV下移20PX ？ 如果我给父DIV添加border: 1px solid，就可以实现父DIV不动，只是子DIV相对父DIV下移了20PX，难道就一定要设置父DIV的border才能实现吗？
给父亲div 设置 overflow: hidden；有个叫 bfc 的东西 叫 块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题。
overflow 属性：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
原文：http://www.cnblogs.com/disneyland/p/4117153.html