参见英文答案 >
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