Недавно я просмотрел код веб-сайта и увидел, что каждый <div>
имеет класс clearfix
.
После быстрого поиска Google я узнал, что это иногда для IE6, но что на самом деле является clearfix?
Не могли бы вы привести несколько примеров макета с clearfix, по сравнению с макетом без clearfix?
Стоит отметить, что сегодня использование плавающих элементов для макета становится все более и более обескураженным с использованием лучших альтернатив.
display: inline-block
- лучшеFlexbox поддерживается с Firefox 18, Chrome 21, Opera 12.10 и Internet Explorer 10, Safari 6.1 (включая Mobile Safari) и браузера Android по умолчанию 4.4.
Подробный список браузеров см. в разделе http://caniuse.com/flexbox.
(Возможно, когда его положение будет установлено полностью, это может быть абсолютно рекомендуемый способ выкладки элементов.)
clearfix - это способ для элемента автоматически очистить дочерние элементы, так что вам не нужно добавлять дополнительную разметку. Он обычно используется в макетах с плавающей точкой, где элементы плавают, чтобы быть уложенными по горизонтали.
clearfix - это способ борьбы с проблемой контейнера нулевой высоты для плавающих элементов
Снятие clearfix выполняется следующим образом:
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Или, если вы не нуждаетесь в поддержке IE < 8, это тоже хорошо:
.clearfix:after {
content: "";
display: table;
clear: both;
}
Обычно вам нужно сделать что-то следующим образом:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
С помощью clearfix вам нужно только следующее:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Прочитайте об этом в этой статье - Крис Койер @CSS-трюки
height: 0;
установлено.
Если вы научитесь визуализировать, эта фотография может помочь вам понять, что делает clearfix.
overflow: auto
к родительскому элементу !? Хлоп
overflow: auto
может иметь некоторые нежелательные побочные эффекты, clearfix - это глобальное решение проблемы, которое не должно вступать в противоречие с какими-либо другими свойствами или иметь нежелательные побочные эффекты.
Другие ответы верны. Но я хочу добавить, что это реликвия того времени, когда люди впервые изучали CSS и злоупотребляли float
, чтобы сделать все их макет. float
предназначен для создания таких вещей, как float-изображения, рядом с длинными тиражами текста, но многие люди использовали его в качестве основного механизма компоновки. Поскольку это не было для этого на самом деле, вам нужны хаки, такие как "clearfix", чтобы заставить его работать.
В наши дни display: inline-block
является твердой альтернативой (за исключением IE6 и IE7), хотя более современные браузеры приходят с еще более полезными механизмами компоновки под именами, такими как flexbox, расположение сетки и т.д.
inline-block
не является строгим улучшением по сравнению с плавающими из-за проблемы межблочного интервала , когда пробел в HTML преобразуется в символы пробела, которые разделяют блоки. inline-block
требует собственных обходных путей , так же, как float
требует clearfix.
clearfix
позволяет контейнеру обернуть его плавающими дочерними элементами. Без clearfix
или эквивалентного стиля, контейнер не обертывает своих плавающих дочерних элементов и не сворачивается, как если бы его плавающие элементы были абсолютно позиционированы.
Существует несколько версий clearfix: Nicolas Gallagher и Тьерри Кобленц в качестве ключевых авторов.
Если вам нужна поддержка старых браузеров, лучше использовать это clearfix:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
В SCSS вы должны использовать следующую технику:
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
Если вам не нужна поддержка старых браузеров, там есть более короткая версия:
.clearfix:after {
content:"";
display:table;
clear:both;
}
div
оберткой плавающих элементов? Можете ли вы помочь мне визуализировать это?
Чтобы обновить ситуацию во втором квартале 2017 года.
Новое свойство отображения CSS3 доступно в Firefox 53, Chrome 58 и Opera 45.
.clearfix {
display: flow-root;
}
Проверить доступность для любого браузера здесь: http://caniuse.com/#feat=flow-root
Элемент (с свойством отображения, установленным для потока-корня) создает блок-контейнер блока и выдает его содержимое с использованием макета потока. Он всегда устанавливает новый контекст форматирования блока для его содержимого.
Это означает, что если вы используете родительский div, содержащий один или несколько плавающих дочерних элементов, это свойство будет гарантировать, что родитель включит все его дочерние элементы. Без каких-либо необходимости взлома clearfix. На любых дочерних элементах и даже на последнем фиктивном элементе (если вы использовали вариант clearfix с: before для последних детей).
.container {
display: flow-root;
background-color: Gainsboro;
}
.item {
border: 1px solid Black;
float: left;
}
.item1 {
height: 120px;
width: 120px;
}
.item2 {
height: 80px;
width: 140px;
float: right;
}
.item3 {
height: 160px;
width: 110px;
}
<div class="container">
This container box encloses all of its floating children.
<div class="item item1">Floating box 1</div>
<div class="item item2">Floating box 2</div>
<div class="item item3">Floating box 3</div>
</div>
flow-root
является реальным решением.
Проще говоря, clearfix - это взлом.
Это одна из тех уродливых вещей, с которыми мы все должны жить, поскольку это действительно единственный разумный способ обеспечить, чтобы плавающие дочерние элементы не переполняли своих родителей. Существуют и другие схемы компоновки, но плавание слишком распространено в веб-дизайне/разработке сегодня, чтобы игнорировать значение clearfix hack.
Я лично склоняюсь к решению Micro Clearfix (Nicolas Gallagher)
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Метод, обычно используемый в макетах с плавающей запятой CSS, присваивает несколько свойств CSS элементу, который, как вы знаете, содержит плавающие элементы. Техника, которая обычно реализуется с использованием определения класса clearfix
(обычно), реализует следующие поведения CSS:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
Цель этих комбинированных действий заключается в создании контейнера :after
активного элемента, содержащего единственный элемент. помечены как скрытые, которые очистят все предыдущие поплавки и эффективно reset страницу для следующего фрагмента контента.
Другой (и, возможно, самый простой) вариант для очистки clearfix заключается в использовании overflow:hidden;
для содержащего элемента. Например
.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}
<div class="parent">
<div class="segment-a">
Float left
</div>
<div class="segment-b">
Float right
</div>
</div>
Конечно, это можно использовать только в тех случаях, когда вы никогда не хотите, чтобы содержимое переполнялось.
Я опробовал принятый ответ, но у меня все еще была проблема с выравниванием содержимого. Добавление селектора ": before", как показано ниже, устраняет проблему:
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
Меньше выше будет скомпилировано CSS:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Вот другой метод, но немного другой
разница - это точка содержимого, которая заменяется на \00A0
== whitespace
Подробнее об этом http://www.jqui.net/tips-tricks/css-clearfix/
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
Вот его компактная версия...
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
.clearfix {...}
, html[xmlns] .clearfix {...}
, * html .clearfix {...}
и .clearfix {...}
выбирают одно и то же и перезаписывают друг друга. Это немного нахально и не очень нужно.
\00A0
, я думаю, это было из-за кросс-браузерной совместимости и знания времени.
div
полностью расширится до нужной высоты, чтобы охватить его плавающие дочерние элементы. webtoolkit.info/css-clearfix.html