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

2 ноября 2007, Написано в CSS

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

Проблема

Используем следующий 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%-й ширины является оптимальным вариантом, хотя в некоторых других случаях возможны и другие значения.

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

  1. Dimox:
    3 Ноя 2007 в 14:16

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

    Ответить
  2. Тут Хумора.NET » Выпуск #335:
    27 Ноя 2007 в 13:26

    [...] your web typography, and never need to worry about those pesky compatibility issues again (I wish!).«Очистка» плавающих блоков. Новое для меня решение известной проблемы. Я то [...]

    Ответить
  3. Big 40wt Svetlyak:
    27 Ноя 2007 в 14:11

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

    Ответить
  4. Alex:
    27 Ноя 2007 в 14:33

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

    Ответить
  5. Carlsbad Home Insurance Quotes:
    27 Ноя 2007 в 22:07

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

    Ответить
  6. Ваня:
    14 Янв 2008 в 15:10

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

    Ответить
  7. Владимир:
    7 Фев 2008 в 10:34

    Ваня, overflow: visible ?

    Ответить
  8. Николай:
    5 Апр 2008 в 17:15

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

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

    Ответить
  9. Александр Викторович:
    1 Окт 2008 в 09:21

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

    Ответить
  10. Alex:
    1 Окт 2008 в 12:19

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

    Ответить
  11. Искра:
    27 мая 2009 в 16:39

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

    Ответить

Оставь комментарий: