父高度不跟随他们的浮动子级

本文介绍了父高度不跟随他们的浮动子级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的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 可在此处找到其工作原理的说明：

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

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