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

Clearfix

В статье « Everything you know about clearfix is wrong » подробно рассмотрены особенности использования этого метода в различных браузерах. Самым часто встречающимся «странным» поведением этого метода является схлапывающиеся отступы у блока. Например, в Safari или Firefox этих отступов нет, а в IE они есть.

Итак, чтобы поведение этого метода в разных браузерах было одинаковым его нужно немного улучшить с помощью дополнительного правила

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

Внимание! Нельзя просто заменить правила clearfix в существующих проектах, так как, возможно, вы уже исправили проблему схлапывающихся отступов с помощью других методов.

Overflow

Подводным камнем этого метода является то, что утверждение «Если поместить абсолютно спозиционированный блок внутри контейнера с overflow: hidden , то часть его часть за пределами контейнера будет отсечена» не всегда верно. Это правило всегда отсекает относительно спозиционированные элементы, но не всегда абсолютно спозиционированные. Это происходит потому, что для элемента со значением стиля position: absolute контейнером будет служить ближайший предок с установленным стилем position в одно из значений absolute, relative или fixed. Это значит, что элемент с абсолютным позиционированием будет виден до тех пор пока его контейнер имеет статичное позиционирование.

Альтернативный способ

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

display: inline-block;
width: <любое явное значение>;

По материалам clearfix Reloaded + overflow:hidden Demystified