Заставляем внешний блок охватывать внутренние плавающие блоки

Распространенная проблема при использовании плавающих блоков заключается в том что они не растягивают внешний контейнер.

Проблема

Используем следующий CSS:

div.container {
	border: 1px solid #000000;
}
 
div.left {
	width: 45%;
	float: left;
}
 
div.right {
	width: 45%;
	float: right;
}

и смотрим что происходит:

float: left

float: right

Необходимо чтобы черная граница охватывала плавающие блоки. Но этого не происходит, т.к. внешний контейнер не имеет высоты.

Старое решение

Старое решение заключалось в добавлении дополнительного элемента со свойством clear: both.

float: left

float: right

Однако лучше избегать лишних элементов.

Новое решение

Нужно добавить следующие свойства к внешнему контейнеру:

div.container {
	border: 1px solid #000000;
	overflow: auto;
	width: 100%
}

Использование width необходимо для активации свойства «hasLayout» в IE.

У элементов в IE есть нестандартное свойство DOM: hasLayout. Когда оно установлено, они ведут себя иначе, чем без этого свойства. Например div с hasLayout=True расширяется, чтобы вместить в себя любые float-элементы. И любой его потомок также будет иметь hasLayout=True. hasLayout включается неявно, например, если задать ширину или высоту для элемента и во многих других случаях.

Смотрим что происходит:

float: left

float: right

Есть несколько моментов заслуживающих внимания.

Метод работает с тремя значениями overflow: auto, hidden и scroll. Использование scroll соответственно добавит полосы прокрутки, несмотря на то нужны они или нет.
Для некоторых браузеров необходимо указание width или height для внешнего контейнера. Например для IE 6 и ниже нужно указать ширину, в 7-ом если не указывать ширину, то тогда необходимо указать корректный Doctype. Стоит заметить что в 7-ом IE внешний контейнер растягивается и без применения вышеописанных методов.
Указание 100%-й ширины является оптимальным вариантом, хотя в некоторых других случаях возможны и другие значения.

Обсуждение:

Dimox 3 Ноя 2007

Спасибо! Интересная информация. Я в последнее время пытаюсь перейти на данный способ.

Ответить
Pingback: Тут Хумора.NET » Выпуск #335
Big 40wt Svetlyak 27 Ноя 2007

А для чего нужно overflow: auto;?

Ответить
Alex 27 Ноя 2007

Без overflow не работает.

Ответить
Carlsbad Home Insurance Quotes 27 Ноя 2007

nnial 2007 — salvatore iaconesi — del.icio.us poetry seems quite interesting — J.Sanders

Ответить
Ваня 14 Янв 2008

У этого способа есть недостаток. Например, если у плавающего элемента нужно указать отрицательный margin, то он будет обрезан, чего не происходит при . Как с этим бороться я пока не знаю.

Ответить
Владимир 7 Фев 2008

Ваня, overflow: visible ?

Ответить
Николай 5 Апр 2008

О господи, какой ужас. Как раз overflow:auto и есть «старый» способ очистки Сейчас модно очищать плавающие блоки через псевдокласс :after. Т.е. в данном примере достаточно написать
div.container:after { content:''; clear:both; }

а для IE просто указать height:1%.
ИМХО, более гибкое решение.

Ответить
Александр Викторович 1 Окт 2008

С каким doctype это работает?

Ответить
Alex 1 Окт 2008

Я использую XHTML Strict

Ответить
Искра 27 Май 2009

Спасибо, очень помогло)

Ответить
Панченко Антон 15 Май 2011

Можно ещё так:
div.container{overflow: hidden; height:100%}

Тоже будет всё нормально работать во всех браузерах.

Ответить

alexilin