关于子盒子模型有margin-top的时候，父盒子模型也同时拥有margin-top的解决方法

关于子盒子模型有margin-top的时候，父盒子模型也同时拥有margin-top的解决方法

<!--container作为父盒子，search作为子盒子，当给子盒子赋一个margin-top 100px时 父盒子也会对于body有一个margin-top 100px
-->
html,body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
}
#container{
height: 800px;
width: 1000px;
margin: 0 auto;
padding-top: 1px;
}
#search{
width: 569px;
height: 500px;
margin: 100px auto;
}

<!--
-->
<div id="container">
<div id="nav">
<a href="">+You</a>
<a href="">Gmail</a>
<a href="">Image</a>
<a id="more">
<img src="img/nav.png" alt="">
</a>
</div>
<div id="search">
<img src="img/google.png">
<div id="searchText">
<input type="text" name="text" id="text" >
<span><img src="img/microphone.png"/></span>
</div>
<div class="btn">
<!--<input type="button" name="searchBtn" class="searchBtn" value="Google Search" />-->
<button type="button" class="searchBtn">Google Search</button>
<button type="button" class="luckyBtn">I'm Feeling Lucky</button>
</div>
</div>

</div>

解决方法

<!--给父盒子添加一个padding-top 1px-->
#container{
height: 800px;
width: 1000px;
margin: 0 auto;
padding-top: 1px;
}

<!--给父盒子添加一个border 1px-->
#container{
height: 800px;
width: 1000px;
margin: 0 auto;
border: 1px;
}

<!--给父盒子添加overflow hidden-->
#container{
height: 800px;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}

原因：

​ 1.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加

​ 2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

​ 详情见：http://blog.csdn.net/weisuochengxuyuan/article/details/17379517