Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?

[@Doggy]

Не верстальщик, но иногда приходится править «кривые руки»… самому времени не было разобраться с семантикой, а тут — отличная министатейка )))

[@genbit]

Со свойством overflow надо быть осторожным, если внутри элемента с overflow:hidden, будет ссылка-якорь на текущую страницу, то вместо прокрутки страницы к нужному месту, мы получим прокрутку внутри элемента с overflow:hidden

[@arestov]

во всех браузерах?

[@genbit]

По-моему да, во всех. Вот тест fu2k.org/alex/css/testcases/overflowhiddenplusanchor#para1

[@Anatoly_Piskunov]

В опере при клике на ссылку ничего не происходит.

[@Bygaga]

Чет я тоже не вкурил что меняется :(

[@porqz]

Весьма занятно. Возьму на заметку.

[@gen4ik]

overflow:hidden лучше стараться не использовать. Кажись ие6 не всегда положительно на него реагирует.
Да и в разных браузерах он будет выглядеть не совсем одинаково.

[@arestov]

в разных браузерах он выглядит одинаково. в IE не работает совсем, но свойство hasLayout тоже создаёт контекст форматирования. нужно стараться его использовать

[@gen4ik]

Думаю буду по прежнему использовать float-clear.

[@pepelsbey]

— IE6 вообще на это не реагирует
— Во всех браузерах будет одинаково, включая IE7+

Ваше высказывание звучит как «я что-то примерно знаю, но не уверен точно что, поэтому скажу что-нибудь такое»…

[@khekkly]

Хорошая подача, иллюстрации и текст…
Наглядно!

[@noita_kronk]

Да, иллюстрации на высоте. Обычно то же самое выглядит очень уродливо и непонятно.

[@arestov]

зелёный и синефиолетовый находятся вне контейнера с overflow:hidden, но этот контейнер не влияет на них (рис. справа)
зато использование clear заставляет помещать зелёный блок ниже любого контейнера с float (слева)

[@arestov]

в следующей статье я расскажу как пользоваться чудесной возможностью overflow без использования этого свойства (а значит не боятся, что контент будет обрезан)

кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE, однако способ будет давать разные результаты (см. последнюю картинку) в IE и остальных браузерах

[@noita_kronk]

С удовольствием прочту продолжение. У Вас подача материала хорошая.

[@arestov]

Был прав, но ошибся с тем как они включают hasLayout: прочитайте то, что по заголовком «But what about IE?». IE не поддерживает :after, поэтому всё только через hasLayout— можно задать height, можно как у них zoom:1.

[@tenshi]

в ff2 замечательно работает -moz-inline-stack

но инлайн блоки ничем не лучше флоатов…

[@tenshi]

https://developer.mozilla.org/En/Mozilla_CSS_Extensions

тем, что используются не по назначению ;-)

[@tenshi]

потому, что они предназначены для вставки блоков в текст, а не для создания «раскладок».

[@Vii]

Ни -moz-inline-stack, ни -moz-inline-box не прокатывают, если вдобавок, необходимо внутри элемента спозиционировать абсолютно другой элемент (в смысле absolute внутри relative).

[@homm]

Еще у меня картинка пропала внутри блока в FF2, если у нее float: left. И в обоих фаерфоксах перестает работать clear:both внитри блоков и они могут быть меньше чем эта картинка с флоатом.

[@homm]

Хотя, нет. clear:both заработал когда я поставил inline-block после -moz-inline-stack, но до //display: inline; zoom: 1; для противного эксплорера :)

[@fatal]

-moz-inline-stack? Почему-то ни гугл, ни яху о нем не слыхивали…

Руку на отсечение отдаю, что вы искали с приставкой "-", и конечно же ничего не нашли. :)

[@arestov]

у меня такое было)))

[@DenCh]

Не замечательно вы по вкладывайте в такие «инлайновые блоки» текст, а еще лучше картинки и F5 понажимайте, ох какие, как правильно выразился господин SelenIT, «непредсказуемые фокусы» вы увидете — смотреть страшно, и никак не исправить, что самое плохое. Текст «сбивается в кучу», с картинками еще хуже, при чем не всегда, и очень не приятно бывает «дебажить»

Единственное что более или менее помогало, либо display: table-cell;, либо display: inline; float: left; + еще что-то для одинакового отображения с остальными браузерами, естественно это подключалось через хаки только для FF2, но это соответственно только если от блоков не требуется быть position: relative; или других «исключительно блочных» свойств.

Но вот что всегда приятно удивляло — правильная работа инлайновых блоков в IE6 )

[@tenshi]

стэк — это всё-таки не блок ;-)
https://developer.mozilla.org/en/XUL_Tutorial/Stack_Positioning
заверни внутренности в какой-нибудь спан и они перестанут наслаиваться.

[@DenCh]

Спасибо — попробую ;)
Инфы об этом мало очень, а про хорошее кроссбраузерное решение вообще только недавно начали описывать, так что приходиться пользоваться, «а вроде» или «а я где то слышал» )

[@tenshi]

ну, это совсем не панацея. все блочные элементы в стэке, позиционируются относительно левого верхнего угла, что во многих случаях не катит.

[@tenshi]

вообще, вкладывать попапы в сами элементы — дурная практика. например, если у дяди з-индекс больше, чем у родителя, то дядя будет сверху «попапа».

[@Xeon303]

Побольше бы таких полезных заметок. Спасибо.

[@egorinsk]

А упомянутый вами тег br семантичен? По моему, нет.

[@arestov]

думаю, семантичней чем пустой див)
а что вы сами скажите о <div class="clear"></div>?

[@lifestar]

Я скажу, что это удобная конструкция =)

[@lifestar]

в чём проблема?

.clear {
clear:both;
position:relative;
font-size:0px;
height:0px;
line-height:0px
}

[@lifestar]

Ну хорошо, напишите css класс на все случаи жизни и пользуйтесь на здоровье =)
Опять же не вижу проблемы

[@pepelsbey]

BR — это перевод строки, т.е. элемент визуального форматирования, т.е. что-то
DIV — это пустой элемент, т.е. ничто

Соотв. DIV выглядит более уместно, если речь идёт про семантику. И уж тем более класс clear выглядит умнее атрибута clear.

[@pepelsbey]

Я говорю прежде всего не про DOM, а про семантику элементов.
H1 — заголовок, A — ссылка, BR — перевод строки, DIV — стерильный контейнер блочного типа.

Ну а Tidy и W3C Validator — это две разные вещи.

Да и вообще неясно о чём спор — я такие штуки не использую, вы, как я понимаю, тоже… )

[@egorinsk]

Мне лично больше нравится див, почему-то. Хотя он тут не намного семантичнее(

Вот хочется чтобы код был аккуратненьким, без всего лишнего, а на практике всегда всякие левые дивы получаются, и т.д.((

[@Xeon303]

А вообще, по поводу стопроцентной семантики кода, использования блочной верстки, соответствию стандартов, считаю, что всегда нужно руководствоваться здравым смыслом и в первую очередь беспокоиться не о валидности кода, а о соотношении цена/качество.

Конечно, никто не запрещается для саморазвития писать «сверхправильный» код, но когда несовершенство браузеров, которые до сих пор довольно кривые, то правильность кода отпадает на второй план и остается лишь вопрос совместимости со всеми браузерами.

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

[@arestov]

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

[@Xeon303]

да, это так. Но всё равно, когда порой безуспешно борешься с IE или другим браузером, то здравый смысл всё таки проступает и приходится делать «чтобы работало» :) Хотя и минусы свои в этом есть.

Я для себя так решил: пока браузеры не станут по-человечески поддерживать стандарты (возможно когда выйдет XHTML 2), то и мне нет смысла полностью писать стандартизированный код. Если возможно, то, конечно я напишу просто и чтобы соответствовало всем правилам.

Просто стоит признаться, что пользователю сайта глубоко плевать как он написан, ему лишь бы видеть правильно сформированную страницу.

[@nicothin]

overflow:hidden — мне часто не подходит, ибо постоянно встречаюсь с блоками, выходящими за границу родителей.
часто использую width:100%; float: left

кстати, предлагаю дополнить статью свобной таблицей совместимости вариантов float-сброса с браузерами: www.ejeliot.com/samples/clearing/rule-support.html
:)

[@arestov]

половина таблицы состоит из способов включения hasLayout (включая inline-block) :). будет ещё одна статья — продолжение)

[@arestov]

ого! а в чём там было дело? расскажите-покажите!)

[@pepelsbey]

Methods for Containing Floats — хорошая подборка примеров.

Я стараюсь всегда пользоваться связкой overflow:hidden + zoom:1, в случаях, когда что-то нужно вытащить из контейнера, я делаю dot-clearing.

Насчёт терминологии — мне кажется, что прямой перевод «очистка» звучит крайне нелепо. Чаще всего в разговорах говорю прямо «клиаринг», а в письменной речи стараюсь привить термин «выключка» — у него конечно есть некоторая типографская история, связанная с выравниванием, но всё же мне кажется, что это удачный вариант. Выключаем действие float-контейнера, начинаем новый нормальный поток.

А иллюстрации и впрямь получились очень наглядные. Блок с цветом + его свойства — всё это легко запоминается.

[@Rooc]

спасибо. надо проверять, в блупринте почему то используется именно div с классом clear. неужели они не знают про метод проще

[@victori_rostov]

Спасибо большое за статью, всю верстательную жизнь пользовалась clear и это порождало описанные проблемы. Приходилось вставлять костыли.

[@egormerkushev]

Вот иллюстрация поговорке «Век живи – век учись». Разбирался с чужим кодом, и ваш совет с overflow помог обойти одну недоработку. Спасибо.