HTML/CSS

Clearfix

Если в родительском блоке есть элементы со свойством float: left то у него теряется высота и перестает работать margin.

clearfix

Исправляет это добавление overflow: hidden к родительскому блоку, но если есть другие элементы, выходящие за границу блока или тень то они будут обрезаны.

Второй способ - добавить класс clearfix к родительскому блоку:

CSS

/* clearfix */
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

HTML

<div class="clearfix">
    <div style="width: 100px; float: left;">float</div>
    <div style="width: 100px; float: left;">float</div>
</div>
07 декабря 2016