Не полный clear

[pavelpat]

В двух словах

Clear ставит элемент ниже всех float-ов! Но иногда требуется чтобы clear отменял плавание не во всем документе а только в некотором блоке. Дак вот, если у этого общего блока (блока в котором лежат float-элементы и некоторый clear) свойсво float НЕ none, то clear в этом блоке применится не ко всей странице а только к этому блоку

Пример доступен по ссылке (сохранить и переменовать в html)

http://dl.dropbox.com/u/22723736/my/html/clear_sample.html.txt

Только я до этого дошел случайно опытно или это давно известная фишка?

оригинал тут _http://pavelpat.livejournal.com/18009.html

Edited November 9, 2011 by pavelpat

[Veseloff]

overflow: hidden в родительском блоке должен решить проблему, если я правильно её понял

[pavelpat]

Проблемы нет. Для меня это фишка как Clear both будет отменять обтекание только нужных мне блоков а не всей страницы.

Например, если меню слева на страничке плавающее, а контент не правающий с margin-left = ширине меню. Допустим в контенте есть плавающие блоки и надо вставить клеар. В обычной ситуации клеар опустит элементы ниже меню а в этом случае только опустит ниже нужных элементов

[Great Rash]

Ничего нового тут нет. Новый контекст - новый поток.

[pavelpat]

Обычно про это не пишут. Надеюсь кому-то будет полезно

[Great Rash]

Обычно про это не пишут. Надеюсь кому-то будет полезно

Ну как же не пишут, вот выдержка из спеки:

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

Все написано, как видите. Дело не в том, что не пишут, дело в том, что не читают

[SelenIT]

Соответственно, можно выбирать по ситуации, какой включалкой контекста воспользоваться: overflow, display:inline-block/table(-cell) либо упомянутый float. Помня, что у каждого варианта свои преимущества и ограничения...

[pavelpat]

Соответственно, можно выбирать по ситуации, какой включалкой контекста воспользоваться: overflow, display:inline-block/table(-cell) либо упомянутый float. Помня, что у каждого варианта свои преимущества и ограничения...

Где можно прочитать что вообще такое контекст html?

Имеется ввиду позиционирование?

[Svatov]

Здесь

[Justnewone]

У меня тож такое было, когда я изобрел велосипед - верстку трехколоночного макета

И кстати, именно на нем я и столкнулся с этим вопросом, клир элемент в средней колонке вставал по высоте по окончании самой длинной из боковых колонок, решение тут уже написали, не буду повторяться

[hedgehog]

У меня тож такое было, когда я изобрел велосипед - верстку трехколоночного макета

И кстати, именно на нем я и столкнулся с этим вопросом, клир элемент в средней колонке вставал по высоте по окончании самой длинной из боковых колонок, решение тут уже написали, не буду повторяться

кстати, недавно столкнулся с таким же случаем, даже отписался про этот велосипед на форуме теперь читаю и стыжусь, хоть велосипед и пригодился крепко