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

Question

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

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

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

Answer 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.

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

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

---

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

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

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

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

Или, если вам не требуется поддержка IE <8, тоже хорошо: </p>

.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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 6

Проще говоря, clearfix - это хак .

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

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

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

ссылка

Answer 7

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

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

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

Answer 8

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

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

Answer 9

Я попробовал принятый ответ, но у меня все еще была проблема с выравниванием контента.Добавление селектора «: перед», как показано ниже, устранило проблему:

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

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