the clearfix hack

Здесь показана неприятная вещь, которая может случится когда вы используете поплавки:

img {
  float: right;
}

<div>

О нет... эта картинка больше чем элемент содержащий ее, поэтому она вышла за пределы своего контейнера, буквально переполнив его снаружи!

Здесь показан способ как исправить это, но он нечист. Он называется clearfix hack.

Давайте попробуем добавить этот новый CSS:

.clearfix {
  overflow: auto;
}

Сейчас посмотрите что произошло:

<div class="clearfix">

Гораздо лучше !

Этот способ работает в современных браузерах. Если вы хотите осуществить поддержку для IE6, то нужно добавить следующее:

.clearfix {
  overflow: auto;
  zoom: 1;
}

Есть экзотические браузеры, которые могут потребовать дополнительного внимания. Мир clearfixing'а достаточно жутковат, но это простое решение будет работать для подовляющего большинства браузеров.