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

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

Как его использовать?

Самый распространённый пример использования данного псевдокласса с поддержкой начиная с IE6 выглядит следующим образом:

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

Более современный и короткий вариант применяющийся например в Bootstrap поддерживается IE8+ имеет следующий вид:

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

Так же альтернативным решением может стать overflow:auto или overflow:hiden