Что такое исправление?


1004

Недавно я просматривал код какого-то сайта и увидел, что у каждого <div> есть класс clearfix.

После быстрого поиска в Google я узнал, что это иногда для IE6, но что на самом деле означает «исправление»?

Не могли бы вы привести несколько примеров макета с явным исправлением по сравнению с макетом без ясного исправления?


65
Это не для IE 6. Clearfix гарантирует, что divбудет полностью расширена до надлежащей высоты, чтобы охватить его плавающие дочерние элементы . webtoolkit.info/css-clearfix.html
Sparky

Ответы:


983

Если вам не требуется поддержка IE9 или ниже, вы можете свободно использовать flexbox, и вам не нужно использовать плавающие макеты.

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

  • display: inline-block - Лучше
  • Flexbox - лучший (но ограниченная поддержка браузера)

Flexbox поддерживается в Firefox 18, Chrome 21, Opera 12.10 и Internet Explorer 10, Safari 6.1 (включая Mobile Safari) и браузере Android по умолчанию 4.4.

Подробный список браузеров см .: https://caniuse.com/flexbox .

(Возможно, как только его позиция будет установлена ​​полностью, это может быть абсолютно рекомендуемый способ размещения элементов.)


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

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-Tricks


1
В любом случае, по какой-то причине пробел лучше, чем точка, у меня были проблемы с точкой в ​​некоторых браузерах, поэтому я и упомянул об этом :) небольшое улучшение не повредит :)
Val

1
content: "\00A0";\ 00A0 представляют собой пробел, простой пробел не работает хорошо :) извините. :)
Val

14
@MadaraUchiha, почему display: inline-block лучше, чем плавающие элементы? Единственная проблема, которая у меня есть, заключается в том, что отображение с помощью встроенного блока вызывает проблемы, поскольку между тегами есть пробел, который не всегда легко контролировать.
Mowwwalker

2
@Kzqai: именно поэтому flexbox является предпочтительным вариантом, когда он становится более широко поддерживаемым.
Призрак Мадары

11
Не согласен с тем, что display: inline-blockэто лучше, чем поплавки для блочной компоновки. Встроенные блоки, как следует из их названия, встроены - большинство макетов основано на блоках, и размещать эти блоки в контексте встроенного форматирования просто не имеет смысла. Вам также приходится сталкиваться с различными проблемами, связанными со встроенным форматированием, такими как пробелы между элементами, другие встроенные элементы, размеры, выравнивание и т. Д., Как указали многие другие. Конечно, макеты с плавающей точкой также не имеют большого смысла, но, по крайней мере, у флотов есть преимущество, что они основаны на блоках.
BoltClock

70

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

В наши дни display: inline-blockэто хорошая альтернатива ( за исключением IE6 и IE7 ), хотя более современные браузеры поставляются с еще более полезными механизмами размещения под такими именами, как flexbox, grid layout и т. Д.


1
Моя практика привела к тому, что нет никаких оснований использовать поплавок. Всякий раз, когда вы используете его, половина вещей ломается. Я бы использовал его, только когда мне нужны вещи, чтобы вызвать в воображении div. Встроенный блок - это круто. Новая коробочная модель потрясающая. Так что больше нет хаков, чтобы идти по вертикали.
Мухаммед Умер

50
inline-blockне является строгим улучшением по сравнению с плавающими из-за проблемы межблочного интервала , когда пробелы в HTML переводятся в символы пробела, которые разделяют блоки. inline-blockтребует собственных обходных путей , так же, как floatтребует clearfix.
Рори О'Кейн

41

clearfixПозволяет контейнер , чтобы обернуть его плавали детей. Без 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;
}

1
Хороший ответ Джон! Что меня интересует, так это почему clear делает divобтекание плавающими элементами? Можете ли вы помочь мне визуализировать это?
Александр Сурафель

@AlexanderSuraphel: Этот ответ объясняет это подробно -> stackoverflow.com/questions/12871710/…
Джон Слегерс

16

Предложить обновленную информацию о ситуации во втором квартале 2017 года.

Новое свойство отображения CSS3 доступно в Firefox 53, Chrome 58 и Opera 45.

.clearfix {
   display: flow-root;
}

Проверьте доступность для любого браузера здесь: http://caniuse.com/#feat=flow-root

Элемент (со свойством display, установленным в flow-root) генерирует блок контейнера блока и размещает его содержимое, используя макет потока. Он всегда устанавливает новый контекст форматирования блока для его содержимого.

Это означает, что если вы используете родительский div, содержащий один или несколько плавающих дочерних элементов, это свойство гарантирует, что родительский элемент охватывает всех своих дочерних элементов. Без какой-либо необходимости взлома. На любых дочерних элементах и ​​даже на последнем фиктивном элементе (если вы использовали вариант 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>


1
Можете ли вы описать, что это делает по отношению к вопросу?
1.21 гигаватт

Clearfix изменяет плавающие дочерние элементы, не влияя на родительский поток с помощью умных хаков, и flow-rootесть реальное решение.
Mystrdat

11

Проще говоря, clearfix это взломать .

Это одна из тех уродливых вещей, с которыми нам всем приходится жить, поскольку это действительно единственный разумный способ обеспечить, чтобы плавающие дочерние элементы не переполняли их родителей. Существуют и другие схемы компоновки, но в современном веб-дизайне / разработке плавание слишком распространено, чтобы игнорировать ценность взлома clearfix.

Я лично склоняюсь к решению Micro Clearfix (Николас Галлахер)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

ссылка


5

Методика, обычно используемая в макетах с плавающей точкой CSS, - это присвоение нескольких свойств CSS элементу, который, как вы знаете, будет содержать плавающие элементы. Техника, которая обычно реализуется с использованием определения класса, называемого clearfix(обычно), реализует следующие поведения CSS:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

Целью этих комбинированных действий является создание контейнера :afterс активным элементом, содержащим один символ '.' помечается как скрытый, что удаляет все существующие плавающие объекты и эффективно сбрасывает страницу для следующего фрагмента содержимого.


2

Другой (и, возможно, самый простой) вариант для получения 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>

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


1

Я опробовал принятый ответ, но у меня все еще была проблема с выравниванием контента. Добавление селектора «: 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;
}

0

Здесь другой метод, то же самое, но немного другой

разница в том, что точка содержимого заменяется на \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}

Вы переопределяете себя здесь как минимум в 3 случаях. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}И .clearfix {...}все выбрать то же самое и заменяют друг друга. Это немного нахально и не очень нужно.
ORyan

Это старая версия метода clearfix CSS, взята с сайта css-tricks.com/snippets/css/clear-fix, который я затем обнаружил, что «.» [Точка] слишком раздражает, и заменил его пробелом следовательно, почему \00A0, я думаю, это было связано с кросс-браузерной совместимостью и знанием времени.
Val
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.