当float应用于其子元素时,<div>会收缩

Question

我想在我的网站的主容器中创建一个元素容器.为了使元素容器成一行,我申请float:left;了它们.但当我加入float它们时,主容器缩小了!我尝试应用于clear:both主容器,但没有任何变化.

CSS:

#main_container
{
    clear:both;
    margin-top:20px;
    padding:20px 10px 30px 15px;
    background:#ccc;
}
.element_container
{
    float:left;
    width:238px;
    height:300px;
    border:1px solid #000;
}

HTML:

<div id="main_container">

    <div class="element_container"></div>

    <div class="element_container"></div>

    <div class="element_container"></div>

</div>

Answer 1

尝试添加:

overflow: auto;

至 #main_container

编辑:正如你可以使用其他的浮法清除方法:,后为解释在这里.