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

2011-11-01 | Веб-дизайн

Clear float fixed

При блочной ("дивовой" или "дивной") верстке макета сайта никак не обойтись без плавающих элементов: 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>

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


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

Статьи по теме:

Комментарии к записи

RSS

Рекомендую
  1. WEBHOST1 - проверенный недорогой хостинг для сайта с PHP и MYSQL.
  2. LOGASTER - генератор логотипов и фавиконок с поддержкой кириллицы.
  3. QComment - наполнение сайтов комментариями и заработок на отзывах.
Категории

Как создать:

Где найти:

Как заработать:

© 2011-2016 «Сеодиз». Создание сайтов и заработок для начинающих.
Копирование запрещено.