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

我正在尝试在我的网站的主容器中创建元素容器。为了使元素容器成一行，我对它们应用了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>

最佳答案

尝试添加：

overflow: auto;

至#main_container
编辑：作为一种可选的浮动清除方法，您可以使用：之后，如here所述。