Как стать автором
Обновить

Комментарии 75

Не верстальщик, но иногда приходится править «кривые руки»… самому времени не было разобраться с семантикой, а тут — отличная министатейка )))
Со свойством overflow надо быть осторожным, если внутри элемента с overflow:hidden, будет ссылка-якорь на текущую страницу, то вместо прокрутки страницы к нужному месту, мы получим прокрутку внутри элемента с overflow:hidden
во всех браузерах?
В опере при клике на ссылку ничего не происходит.
Чет я тоже не вкурил что меняется :(
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Весьма занятно. Возьму на заметку.
overflow:hidden лучше стараться не использовать. Кажись ие6 не всегда положительно на него реагирует.
Да и в разных браузерах он будет выглядеть не совсем одинаково.
в разных браузерах он выглядит одинаково. в IE не работает совсем, но свойство hasLayout тоже создаёт контекст форматирования. нужно стараться его использовать
Думаю буду по прежнему использовать float-clear.
— IE6 вообще на это не реагирует
— Во всех браузерах будет одинаково, включая IE7+

Ваше высказывание звучит как «я что-то примерно знаю, но не уверен точно что, поэтому скажу что-нибудь такое»…
Хорошая подача, иллюстрации и текст…
Наглядно!
Да, иллюстрации на высоте. Обычно то же самое выглядит очень уродливо и непонятно.
НЛО прилетело и опубликовало эту надпись здесь
зелёный и синефиолетовый находятся вне контейнера с overflow:hidden, но этот контейнер не влияет на них (рис. справа)
зато использование clear заставляет помещать зелёный блок ниже любого контейнера с float (слева)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
в следующей статье я расскажу как пользоваться чудесной возможностью overflow без использования этого свойства (а значит не боятся, что контент будет обрезан)

кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE, однако способ будет давать разные результаты (см. последнюю картинку) в IE и остальных браузерах
С удовольствием прочту продолжение. У Вас подача материала хорошая.
НЛО прилетело и опубликовало эту надпись здесь
Был прав, но ошибся с тем как они включают hasLayout: прочитайте то, что по заголовком «But what about IE?». IE не поддерживает :after, поэтому всё только через hasLayout— можно задать height, можно как у них zoom:1.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
в ff2 замечательно работает -moz-inline-stack

но инлайн блоки ничем не лучше флоатов…
НЛО прилетело и опубликовало эту надпись здесь
https://developer.mozilla.org/En/Mozilla_CSS_Extensions

тем, что используются не по назначению ;-)
НЛО прилетело и опубликовало эту надпись здесь
потому, что они предназначены для вставки блоков в текст, а не для создания «раскладок».
НЛО прилетело и опубликовало эту надпись здесь
Ни -moz-inline-stack, ни -moz-inline-box не прокатывают, если вдобавок, необходимо внутри элемента спозиционировать абсолютно другой элемент (в смысле absolute внутри relative).
Еще у меня картинка пропала внутри блока в FF2, если у нее float: left. И в обоих фаерфоксах перестает работать clear:both внитри блоков и они могут быть меньше чем эта картинка с флоатом.
Хотя, нет. clear:both заработал когда я поставил inline-block после -moz-inline-stack, но до //display: inline; zoom: 1; для противного эксплорера :)
-moz-inline-stack? Почему-то ни гугл, ни яху о нем не слыхивали…
Руку на отсечение отдаю, что вы искали с приставкой "-", и конечно же ничего не нашли. :)
у меня такое было)))
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Не замечательно вы по вкладывайте в такие «инлайновые блоки» текст, а еще лучше картинки и F5 понажимайте, ох какие, как правильно выразился господин SelenIT, «непредсказуемые фокусы» вы увидете — смотреть страшно, и никак не исправить, что самое плохое. Текст «сбивается в кучу», с картинками еще хуже, при чем не всегда, и очень не приятно бывает «дебажить»

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

Но вот что всегда приятно удивляло — правильная работа инлайновых блоков в IE6 )
стэк — это всё-таки не блок ;-)
https://developer.mozilla.org/en/XUL_Tutorial/Stack_Positioning
заверни внутренности в какой-нибудь спан и они перестанут наслаиваться.
Спасибо — попробую ;)
Инфы об этом мало очень, а про хорошее кроссбраузерное решение вообще только недавно начали описывать, так что приходиться пользоваться, «а вроде» или «а я где то слышал» )
ну, это совсем не панацея. все блочные элементы в стэке, позиционируются относительно левого верхнего угла, что во многих случаях не катит.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
вообще, вкладывать попапы в сами элементы — дурная практика. например, если у дяди з-индекс больше, чем у родителя, то дядя будет сверху «попапа».
Побольше бы таких полезных заметок. Спасибо.
А упомянутый вами тег br семантичен? По моему, нет.
думаю, семантичней чем пустой див)
а что вы сами скажите о <div class="clear"></div>?
Я скажу, что это удобная конструкция =)
НЛО прилетело и опубликовало эту надпись здесь
в чём проблема?

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

НЛО прилетело и опубликовало эту надпись здесь
Ну хорошо, напишите css класс на все случаи жизни и пользуйтесь на здоровье =)
Опять же не вижу проблемы
BR — это перевод строки, т.е. элемент визуального форматирования, т.е. что-то
DIV — это пустой элемент, т.е. ничто

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

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

Да и вообще неясно о чём спор — я такие штуки не использую, вы, как я понимаю, тоже… )
НЛО прилетело и опубликовало эту надпись здесь
Мне лично больше нравится див, почему-то. Хотя он тут не намного семантичнее(

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

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

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

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

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

кстати, предлагаю дополнить статью свобной таблицей совместимости вариантов float-сброса с браузерами: www.ejeliot.com/samples/clearing/rule-support.html
:)
половина таблицы состоит из способов включения hasLayout (включая inline-block) :). будет ещё одна статья — продолжение)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
ого! а в чём там было дело? расскажите-покажите!)
НЛО прилетело и опубликовало эту надпись здесь
Methods for Containing Floats — хорошая подборка примеров.

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

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

А иллюстрации и впрямь получились очень наглядные. Блок с цветом + его свойства — всё это легко запоминается.
НЛО прилетело и опубликовало эту надпись здесь
спасибо. надо проверять, в блупринте почему то используется именно div с классом clear. неужели они не знают про метод проще
Спасибо большое за статью, всю верстательную жизнь пользовалась clear и это порождало описанные проблемы. Приходилось вставлять костыли.
Вот иллюстрация поговорке «Век живи – век учись». Разбирался с чужим кодом, и ваш совет с overflow помог обойти одну недоработку. Спасибо.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.