Этот вопрос уже имеет ответ здесь:
Это - стандартная проблема плавающая. У Вас есть набор плавающих элементов в отделении родительского контейнера. Так как childs плавают, родитель не расширяется для включения всех их.
Я знаю о clearfix решении, а также установка водосливного свойства на отделении родительского контейнера к "автоматическому" или "скрытому" .http://www.quirksmode.org/css/clearing.html мне устанавливающий водосливный метод кажется намного более хорошей как свое всего одно свойство. То, что я хочу понять, - когда делает подход clearfix, имеет преимущество перед этой причиной метода, я вижу, что он используется чрезвычайно часто.
P.S. Я не обеспокоен IE6.
Единственный раз, когда вам следует использовать метод clearfix, который вставляет невидимое содержимое для очистки, - это если вам нужно, чтобы элемент был видимым, когда он выходит за пределы элемента. вы применяете его, иначе запуск hasLayout + overflow будет золотым.
Обратите внимание, что в IE7 для скрытых триггеров переполнения hasLayout. Не уверен насчет IE8.
#wrapper { width:80em; overflow:hidden; }
Вышеупомянутый метод будет работать нормально в большинстве случаев, если вам не нужно сказать, #header для переполнения после #wrapper ..
#wrapper { width:80em; position:relative; }
#wrapper:after { content:"."; clear:both; display:block; height:0; visibility:hidden; }
#header { position:absolute; top:-15px; left:-15px; }