CSS, HTML и многое другое…

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

Проблема

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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