См. этот пример jsFiddle для справки.
Большинство из нас достаточно хорошо знакомы с простой техникой получения CSS Colunms (2 деления рядом с сайтом), которая включает в себя плавающую одну и толкающую другую через маржу & width:auto, за которой следует один из многих методов очистки. (Exibit A @ jsFiddle Reference ) .
Эта Техника работает довольно хорошо и хорошо работает со всеми видами очистки, которые я знаю лично:
clear: both div в нижней части контейнера overflow: hidden для контейнера - Clearfix для контейнера
Однако простая реализация этого прекрасно работает, когда вы знаете ширину левого элемента и хотите, чтобы правый элемент заполнил остальную часть его контейнера.
Эта техника прекрасно работает и в обратном направлении (float: right и при использовании margin-right) с оговоркой, что вы должны поместить плавающий (правый) элемент первым в контейнер, чтобы IE правильно отображал. (Exibit B @ jsFiddle Reference )
Однако я заметил проблему, когда мы имеем дело с вложенной очисткой. (Ака очищает внутри одного из колонн).
Как только я поместил очищающий контейнер в пустую колонку (Exibit C & D) Я заметил странное поведение в браузерах WebKit и Gecko. Элемент очистки попадает на внешний поплавок и очищает поплавок от его родителя.
Этого не происходит, когда мастер-поплавок находится слева. (Exibit E)
Есть ли способ обойти это, я хотел бы продолжить использовать float: right в столбце известной ширины, если это возможно, кажется немного странным, что один работает, а другой нет.
Также, как ни странно, это не проблема в IE9 (но в IE 6-8).
Для справки: вывод jsFiddle, отображаемый Chrome 17.0.963.46 в 64-битной Windows 7:
Есть идеи?
Редактировать : Я должен отметить, что перенос внутреннего плавающего числа с overflow: hidden, кажется, работает, но у него есть свои сложности (такие, что он в основном нарушает что-либо с относительными / абсолютными компонентами, раскрывающимися DHTML. и т.д., и это не всегда возможное решение.