父高度不跟随他们的浮动子级 [英] Parent Height doesn't follow their float children

问题描述

我的mainContainer高度不符合子女宽度

My mainContainer height doesn't follow their children width

这里是我的代码，您有任何建议，请指教。

and here is my code do you have any suggestion please advise.

我需要CSS解决方案而不是JavaScript，所以先感谢。

I need the CSS solution not JavaScript so thank in advance

<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 会导致容器包含浮动元素。

Because its content is floated, the container div collapses. Using a 'clearfix' class or, as I mentioned, adding overflow:hidden will cause the container to contain the floated elements.

UPDATE 可在此处找到其工作原理的说明： http://stackoverflow.com/ a / 9193270/1588648

UPDATE Explanation of why this works can be found here: http://stackoverflow.com/a/9193270/1588648

这篇关于父高度不跟随他们的浮动子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！