Что такое clearfix?

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

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

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

Я попробовал предложенный ответ, но всё равно столкнулся с проблемой выравнивания контента. Добавление селектора :before, как показано ниже, помогло решить эту проблему:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Старая версия браузеров не поддерживают пустой контент */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

LESS выше скомпилируется в следующий CSS:

clearfix:after,
clearfix:before {
  content: " ";
  /* Старая версия браузеров не поддерживают пустой контент */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Использование селектора :before действительно помогло исправить выравнивание, что подтверждает его важность для совместимости с более старыми браузерами.

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

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