Что такое clearfix?

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

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

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

Ответы

Ответ 1

Если вам не требуется поддержка 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 Image

(Оригинальное изображение, опубликованное @Kyo в этом ответе)

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

Clearfix - это способ борьбы с проблемой с контейнером нулевой высоты для плавающих элементов

Исправление выполняется следующим образом:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Или, если вам не требуется поддержка IE & lt; 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

Ответ 2

Если вы научитесь визуализировать, эта фотография может помочь вам понять, что делает clearfix.

enter image description here

Ответ 3

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

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

Ответ 4

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;
}

Ответ 5

Предложить обновленную информацию о ситуации во втором квартале 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>

Ответ 6

Проще говоря, 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) */
}

ссылка

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

Вот другой метод, но немного другой

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