css – 父母高度不跟随他们的浮动孩子

参见英文答案 > Floating elements within a div,floats outside of div. Why?8个答案我的主容器高度不跟随他们的孩子的宽度

这是我的代码，你有什么建议请指教。

我需要CSS解决方案，而不是JavaScript，所以谢谢提前

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

这是我的css

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}

解决方法

添加overflow：hidden;到容器：

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

由于其内容浮动，容器div崩溃。使用’clearfix’类，或者正如我所提到的，添加overflow：hidden将使容器包含浮动元素。

更新说明为什么这可以在这里找到：http://stackoverflow.com/a/9193270/1588648