Clear Float (ClearFix) способы очистки потока

Clear Float для верстки сайтов

При блочной («дивовой» или «дивной») верстке макета сайта никак не обойтись без плавающих элементов: HTML элементов со свойствами float:left и float:right которые обычно выпадают из основного потока и выходят за границы родительского элемента, и в результате этого родительский элемент схлопывается.

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

Самый простой способ очистки потока

Один из самых старейших и довольно часто используемый даже по сей день способ: добавление после плавающих элементов дополнительного элемента со свойством clear:leftclear:right или clear:both. В зависимости от того с какой стороны назначено обтекание у плавающего элемента можно использовать очистку слева (left), справа (right) или с обеих сторон (both).

Примеры очистки потока этим способом:

<div>
<div style="float:left">Плавающий блок обтекаемый текстом справа</div>
<div>Простой текст обтекающий плавающий блок</div>
<div style="clear:left">Пустой очищающий поток див</div>
</div>

Вместо дива можно использовать любой блочный элемент например: <BR/> <HR/>, только в этом случае придется обнулять стили присущие им по умолчанию.
Плюсы этого способа очистки потока: он кроссбраузерный и поток будет очищаться даже при отключеных CSS стилях
Минусы: несемантичность (элементы используются не по назначению) и необходимость в дополнительных элементах.

Очистка потока стилями при помощи класса clearfix и псевдокласса :after

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

CSS стили для класса clearfix

.clearfix:after {
content:".";
clear:both;
display:block;
height:0;
font-size:0;
visibility:hidden
}
.clearfix {display:inline-block}
/* Хак для IE 6 и 7 спрятанный от IE-mac */
* html .clearfix {height:1%}
.clearfix {display:block}
/* Конец хака */

Плюсы этого способа очистки: Не нужно дополнительных элементов
Минусы способа: Он не валиден поскольку используется хак для IE 6 и 7 не поддерживающих псевдоелементы.

Еще один более компактный вариант очистки этим способом

.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* Хак для IE 6 и 7 */
}

Семантически правильный кроссбраузерный способ очистки потока с помощью CSS свойства: overflow:hidden

Этот способ очистки потока за плавающим (float) элементом мне нравится больше всего, поскольку работает во всех браузерах и не нужно использовать ни какие хаки.
Пример способа:

<div style="width:100%;overflow:hidden">
<div style="float:left">Плавающий блок</div>
<div>Простой текст</div>
</div>

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

Читайте также: html css кроссбраузерность