Clearfix — метод очищения потока с сохранением структурной верстки

Всем доброго времени суток. Мы продолжаем серию уроков по блочной верстке.

И сегодня мне хотелось поговорить с Вами о методе Clearfix. Мы разберем, для чего он нужен и как правильно его использовать.

В начале своей карьеры вэб-мастера я довольно много времени убил на то, чтобы разобраться в этом вопросе, хотя в итоге все оказалось намного проще. Просто информацию пришлось собирать по крупицам.

Сейчас я дам Вам все в одном месте. Начнем...

Для начала давайте рассмотрим некую ситуацию. У нас есть:

• блок-родитель;
• плавающий блок, вложенный в блок-родитель;
• текст (или блок, или что угодно), который будет обтекать плавающий блок (нужен для демонстрации).

Вот пример кода:

<div class="parent">
    <div class="floatBlock">Этот блок с float: left;</div>
    текст, который задаст высоту родителю
</div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

Возникает несколько вопросов:

• Какую высоту в данном случае будет иметь блок-родитель (div class="parent")?
• Где расположится блок (div class="nextStaticBlock"), помещенный под блок-родитель?

По идее, следующий блок будет расположен под блоком-родителем, высота которого будет равна высоте самого высокого дочернего блока (в данном примере высоте плавающего блока):

Однако в реальности, следующий блок (в большинстве браузеров) действительно расположен под блоком-родителем, но высота родителя равна высоте статического (неплавающего) содержимого:

Вопрос решается вставкой небольшого фрагмента HTML и CSS кода.

Старое решение

Очищаем поток, используя дополнительный элемент, помещенный в конце блока родителя со свойством или атрибутом clear (<div style="clear: both;></div> или <br clear="all" />):

<div class="parent">
    <div class="floatBlock">Этот блок с float: left;</div>
    текст, который задаст высоту родителю
</div>
<div style="clear: both;"></div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

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

Новое решение

Очищаем поток, используя псевдоэлемент :after

HTML:

<div class="parent">
    <div class="floatBlock">Этот блок с float: left;</div>
    текст, который задаст высоту родителю
</div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

CSS:

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

Очищаем поток с помощью overflow: hidden

Также для очистки потока есть более простой способ — добавить правило overflow: hidden родителю, который содержит плавающие элементы:

.parent {
    overflow: hidden;
    zoom: 1; /* for IE */}

Метод более простой, но не всегда применим (например, когда родитель содержит абсолютно позиционируемые элементы, которые должны выходить за границы родителя. Пример — выпадающее меню).

Микро clearfix

Если не нужна поддержка IE6-7:

.parent:after {
     content: "";
     display: table;
     clear: both;}

Если нужна, тогда надежней использовать такой вариант:

/* For modern browsers */
.parent:before,
.parent:after {
    content: "";
    display: table;}
 
.parent:after {
    clear: both;}
 
/* для IE6-7 */
.parent {
    zoom: 1;}

На этом мы закончим. Как видите, есть множество способов решить данную задачу. Какой из них использовать — решать Вам. Я лично использую разные способы в разных ситуациях.

Не забываем подписываться на обновления, и... Пока-пока!