HTML\CSS → Как работает свойство clear в СSS

Свойство clear запрещает обтекание элемента.

clear:left — запрещено обтекание слева;
clear:right — запрещено обтекание справа;
clear:both — запрещено обтекание с обеих сторон;
clear:none — обтекание разрешено

Если после float-элемента расположен элемент с clear-обтеканием, то последний опускается под float-элемент. clear:both часто используют в конструкции под названием clearfix:

<div>
    <div class="float_left"></div>
    <div class="float_rigth"></div>
    <div style="clear:both"></div> 
</div>

Это не дает родительскому блоку “схлопнуться” и float-блокам “пройти” через родительский блок, а заодно и растягивает родительский блок по высоте.

Более современный вариант clearfix выглядит так:

<div class="clearfix">
    <div class="float_left"></div>
    <div class="float_rigth"></div>
</div>
...
.clearfix:after{
    content: '';
    display: table;
    clear: both;
}