Пользователь
0,0
рейтинг
5 января 2009 в 10:23

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

CSS*
clear и overflowСвойство clear со значениями left, right, both действительно очищает поток в отличие от overflow со значеним hidden, которое создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.


В самом начале своего пути верстальщика многие из нас, наверно, ожидали следующее отобржание при следующей конструкции:
image
Ожидания не оправдывались и мы видели примерно следующее:
image
Тогда городились конструкции вида <div class="clear"></div>, кстати бессмысленные при существовании <br clear="all"/>.

Потом приходили методы самоочистки, всё с тем же свойством clear. Ещё к ним относят overflow со значением hidden. В описании данного свойства в спецификации ничего связанного с обтеканием нет, зато в описании «нормального потока» есть абзац с парой строк, связанных с нашим «overflow:hidden»:
«… элементам с 'overflow' отличными от 'visible' (не считая случаев, когда значение наследуется областью просмотра) устанавливается новый контекст для форматирования»


Таким образом всё колдовство, просходящее внутри элемента, локализуется и больше не выходит за его пределы, а это означает, что можем получить то, что ожидали получить (см. выше), как если бы мы поместили весь контент нашего элемента в отдельный iframe. Но кроме этого мы получаем кое-что ещё.

CSS спецификация требует «поместить верхний край границы ниже нижнего внешнего края любых попадавшихся ранее в документе элементов со свойством float:left или float:right или и с тем и другим» при применении к элементу свойства clear с значениями соотвественно left, right и both.

Иными словами если у вас есть высокий сайдбар слева, и справа его обтекает контент и в контенте попадается элемент со свойством clear:left, то этот элемент окажется ниже сайдбара, что не очень нужно, особенно если сайдбар очень высокий.
clear
Я считаю, что свойство overflow гараздо удобней для управления потоком, чем clear (см. рис. ниже) и предполагаю, что оно способствует улучшению производительности так же как абсолютное позиционирование.
image
Видимо свойство hasLayout в IE работает точно также — создаёт отдельный контекст форматирования для выбранного элемента.

Эта же статья на моём сайте Clear или overflow:hidden — очистка всего потока или создание контекста форматирования
Глеб Арестов @arestov
карма
39,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

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

  • –4
    Не верстальщик, но иногда приходится править «кривые руки»… самому времени не было разобраться с семантикой, а тут — отличная министатейка )))
  • +2
    Со свойством overflow надо быть осторожным, если внутри элемента с overflow:hidden, будет ссылка-якорь на текущую страницу, то вместо прокрутки страницы к нужному месту, мы получим прокрутку внутри элемента с overflow:hidden
    • 0
      во всех браузерах?
      • +1
        По-моему да, во всех. Вот тест fu2k.org/alex/css/testcases/overflowhiddenplusanchor#para1
        • 0
          В опере при клике на ссылку ничего не происходит.
        • 0
          Чет я тоже не вкурил что меняется :(
          • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Весьма занятно. Возьму на заметку.
  • –1
    overflow:hidden лучше стараться не использовать. Кажись ие6 не всегда положительно на него реагирует.
    Да и в разных браузерах он будет выглядеть не совсем одинаково.
    • +2
      в разных браузерах он выглядит одинаково. в IE не работает совсем, но свойство hasLayout тоже создаёт контекст форматирования. нужно стараться его использовать
      • 0
        Думаю буду по прежнему использовать float-clear.
    • +3
      — IE6 вообще на это не реагирует
      — Во всех браузерах будет одинаково, включая IE7+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.