Как использовать clearfix в CSS?

Clearfix — вспомогательный псевдокласс, помогающий разрешать ситуации со схлопывающейся высотой у родительского div когда внутри него расположены плавающие элементы, например с float: left.

Вариант 1: С поддержкой IE6+

Классический подход:

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

Вариант 2: Современный способ (IE8+)

Более короткий и актуальный метод, применяемый в Bootstrap:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Альтернативные решения

Вместо clearfix можно применять свойства overflow: auto или overflow: hidden — они достигают аналогичного эффекта разрешения проблемы с высотой контейнера, содержащего плавающие элементы.