Описание тега clearfix

Clearfix - это способ автоматического удаления элемента после себя, так что вам не нужно добавлять дополнительную разметку. Обычно он используется в макетах с плавающей запятой, где элементы размещаются горизонтально.

Описание

Clearfix - это способ автоматического удаления элемента после себя, так что вам не нужно добавлять дополнительную разметку. Обычно он используется в макетах с плавающей запятой, где элементы размещаются горизонтально.

Clearfix - это способ решения проблемы контейнера нулевой высоты для плавающих элементов.


Примеры

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Обычно вам нужно сделать следующее:

<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->

С clearfix вам нужно только

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Ссылки

  1. Stackru - Что такое clearfix?
  2. Статья Криса Койера @ CSS-Tricks
  3. Новый хак micro clearfix
  4. Обзор различных методов clearfix