Распространенная проблема при использовании плавающих блоков заключается в том, что они не растягивают внешний контейнер.
Проблема
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
Но лучше избегать лишних элементов.
Новое решение
1 2 3 4 5 | 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;?
Без overflow не работает.
nnial 2007 — salvatore iaconesi — del.icio.us poetry seems quite interesting — J.Sanders
У этого способа есть недостаток. Например, если у плавающего элемента нужно указать отрицательный margin, то он будет обрезан, чего не происходит при . Как с этим бороться я пока не знаю.
Ваня, overflow: visible ?
О господи, какой ужас. Как раз overflow:auto и есть «старый» способ очистки
Сейчас модно очищать плавающие блоки через псевдокласс :after. Т.е. в данном примере достаточно написать
div.container:after {content:'';
clear:both;
}
а для IE просто указать height:1%.
ИМХО, более гибкое решение.
С каким doctype это работает?
Я использую XHTML Strict
Спасибо, очень помогло)
Можно ещё так:
div.container{overflow: hidden; height:100%}
Тоже будет всё нормально работать во всех браузерах.