Clearfix

Я был в восторге от нового метода очистки потока от float'ов, с которым познакомился. Узнал я о нём из статьи «Clearing floats: clearfix vs overflow. Недостатки и достоинства обоих подходов».

До этого я знал два основных способа очистить поток:

• С помощью задания overflow: hidden элементу, внутри которого мы хотим очистить поток. overflow: hidden создаёт отдельный контекст форматирования. Недостатком этого метода является то, что если нам понадобится вынести какой-то блок за границы контейнера с overflow: hidden, то этот блок не будет виден.
• С помощью <div class="clear"></div>. У класса .clear в стилях задаём clear: both. В этом методе мне не нравилась необходимость использования лишнего пустого div'а, что бьёт по семантике.

А вот в чем заключается новый метод. Элементу, внутри которого мы хотим очистить поток, в стилях мы прописываем:

.clearfix { zoom: 1 }   /* создаем новый контекст форматирования для IE6 и 7 */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
  width: 0; height: 0;
  overflow: hidden;
  font-size: 0;
}

Т.е., как мы видим, в данном методе мы используем псевдо-класс :after. В комментарие к топику можно найти ещё более упрощенную версию конструкции, которая, как мне кажется, вполне удачно справится с задачей в большинстве случаев:

.clear:after {
  content: "";
  display: block;
  clear: both;
}
/* И не забываем про hasLayout для IE */

Этот метод обладает одним очевидным приимуществом перед overflow: hidden, т.к. позволяет выносить дочерние элементы за границы родительского. В общем, при выборе какой же из методов использовать — overflow: hidden или .clear:after { }, я бы вам рекомендовал прислушаться к совету Вадима Макеева и «пользоваться связкой overflow:hidden + zoom:1, а в случаях, когда что-то нужно вытащить из контейнера, использовать dot-clearing» (dot-clearing — это тот самый новый способ, о котором и идёт речь в статье).

Не забываем о том, что IE7 и ниже не поддерживает псевдоклассы :after и :before. Для очищения потока в этих версиях браузера нужному блоку мы присваиваем hasLayuot, что создаёт новый контекст форматирования. Таким образом для IE7 и 6 мы выравниваем поток с помощью hasLayout, для остальных браузеров мы выравниваем поток с потощью clear: both — и это не одно и тоже! Рекомендую разобрать вот этот пример, в котором метод очистки потока с помощью псевдокласса :after приводит к разному результату в IE7 и ниже и в остальных браузерах.

Больше информации вы найдёте в статье «How To Clear Floats Without Structural Markup» на Position Is Everything.