父高不跟随他们的浮子

Question

我的mainContainer高度不遵循他们的孩子宽度

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

我需要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;
}

Answer 1

添加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将导致容器包含浮动元素.

更新有关其工作原理的说明,请访问:https://stackoverflow.com/a/9193270/1588648

... 和这里:

为了让它们(浏览器)计算出溢出块的边界(因此应该被隐藏),它们需要知道块的大小.由于这些块没有明确的高度设置,因此浏览器使用计算出的内容高度.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 2

您需要清除浮动元素,overflow: hidden;用于#mainContainer

演示

替代:(您可以添加clear: both;到清除浮动)

演示

或者您也可以自我清除浮动元素(仅当您希望支持IE9 = +时)

.clear:after {
  content: "";
  clear: both;
  display: table;
}

为什么会这样？