Очистка потока. Метод 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
Итак, вариант первый, не удовлетворяющий семантике - использование тега с определенными свойствами, среди которых 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
