При блочной ("дивовой" или "дивной") верстке макета сайта никак не обойтись без плавающих элементов: 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 - класс, присваиваемый родительскому HTML элементу содержащему один или несколько плавающих элементов для очистки потока.
.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 */
}
Этот способ очистки потока за плавающим (float) элементом мне нравится больше всего, поскольку работает во всех браузерах и не нужно использовать ни какие хаки.
Пример способа:
<div style="width:100%;overflow:hidden">
<div style="float:left">Плавающий блок</div>
<div>Простой текст</div>
</div>
Плюсы способа: Кроссбраузерность, семантичность, минимум стилей, отсутствие дополнительных пустых элементов.
Минусы: Для полной кроссбраузерности необходимо указание ширины родительского блока, при вынесении какого-либо элемента за границы блока он перестанет быть виден.
Категории
Как создать:
Где найти:
Как заработать: