Что такое clearfix?

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

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

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

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

есть несколько версий clearfix, с Николас Галлахер и И Thierry Koblentz как ключевые авторы.

если вы хотите поддержку старых браузеров, это лучше всего использовать это 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;
}

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

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

.clearfix {
   display: flow-root;
}

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

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

Это означает, что если вы используете Родительский div, содержащий один или несколько плавающих дочерних элементов, это свойство будет гарантировать, что родительский элемент заключает все свои дочерние элементы. Без какой-либо необходимости в clearfix рубить. На детей, ни даже последнего фиктивный элемент (если вы используете вариант clearfix С :до последнего ребенка).

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

проще говоря, clearfix Хак.

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

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

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

ссылка

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

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

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

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

вот другой метод то же самое, но немного по-другому

разница в содержании точка, которая заменяется на A0 ==whitespace

подробнее об этом http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "A0"; 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: "A0"; 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 используется для очистки дополнительных поплавков. Это класс, добавленный в родительский элемент.

мой код clearfix здесь...

/* clearfix*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

хотя он скопирован, но поможет. Здесь :before и :after используется для указания начальных и конечных точек этого элемента. Тогда как clear:both не позволит другим плавающим элементам справа или слева от указанного элемента, содержащего этот класс.