关于子盒子模型有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