Как использовать 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