сжимается, когда float применяется к его подэлементам

Я пытаюсь создать контейнер элементов в основном контейнере моего сайта. Чтобы сделать элемент контейнером в строке, я применил к ним 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>