Очистка потока. Метод clearfix

В природе существует несколько способов очистки потока от float. И каждый из них в какой-то мере по разному работает в различных браузерах. Можно воспользоваться простым свойством clear: both;, но при этом придется добавить еще несколько свойств к элементу, чтобы отображение было идентичное во всех браузерах.

Итак, вариант первый, не удовлетворяющий семантике - использование тега с определенными свойствами, среди которых clear: both.

Свойства CSS, с помощью которых происходит кроссбраузерная очистка потока:

.clr {
clear: both; /* очистка потока */
height: 0;
line-height: 0;
font-size: 0;
}

line-height: 0 и font-size: 0 используется для IE, т.к. он отображает пустоту в блоке с заданным размером шрифта и меж строчным интервалом.

Рабочий пример:

.container {
background #000000;
border: 1px solid #666666;
}

.clr {
clear: both; /* очистка потока */
height: 0;
line-height: 0;
font-size: 0;
}

Левый блок

Правый блок

Смотреть результат
.

Вариант второй: использование псевдо-класса :after для контейнера, внутри которого находятся те самые плавающие элементы, и hasLayout для IE.

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

* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Смотреть результат
.

Единственный минус этого варианта в том, что данный код не проходит валидацию CSS, потому что валидатор ничего не знает о zoom. Поэтому лучше закрыть глаза на те 2 строчки ошибок и использовать именно этот вариант.

Но если Вы стремитесь к валидности кода, то можно использовать еще один вариант (в IE7 возможны глюки, куда же без них):

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

Существует еще несколько вариантов очистки потока, о которых нагляднее всего можно узнать из таблицы, приведенной
здесь
. Там же указано как работает тот или иной метод в разных браузерах.

Источник:Блог о верстке Руслана Дерепко, DLE

Перейти на сайт

Очистка потока. Метод clearfix

Похожие новости