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

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

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

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

Один из самых старейших и довольно часто используемый даже по сей день способ: добавление после плавающих элементов дополнительного элемента со свойством clear:left, clear: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>

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