войти зарегистрироваться

Каскадные Таблицы Стилей whois

индекс
230,41

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

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 работает точно также — создаёт отдельный контекст форматирования для выбранного элемента.
+110
5 января 2009, 10:23
253
arestov

комментарии (74)

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

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

    Давать overflow на контейнер — стремно. Особенно там где при переделках сайта могут возникнуть всяческие всплывающие/выскакивающие окна, скрытые в этом контейнере с overflow.
    • в следующей статье я расскажу как пользоваться чудесной возможностью overflow без использования этого свойства (а значит не боятся, что контент будет обрезан)

      кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE, однако способ будет давать разные результаты (см. последнюю картинку) в IE и остальных браузерах
      • С удовольствием прочту продолжение. У Вас подача материала хорошая.
      • >кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE
        О чем вы???? Там же речь о .clearfix:after
        • Был прав, но ошибся с тем как они включают hasLayout: прочитайте то, что по заголовком «But what about IE?». IE не поддерживает :after, поэтому всё только через hasLayout— можно задать height, можно как у них zoom:1.
          • «Был прав, но ошибся» — гениально. Надо запомнить.
            Имхо главная ошибка — в способе очистке, который вы демонстрируете. Потому что 1) overflow:hidden используется не по назначению 2) имеет побочные эффекты, которые нежелательны (о чем я и написал выше).
            • НЛО прилетело и опубликовало эту надпись здесь.
              • в 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
                    заверни внутренности в какой-нибудь спан и они перестанут наслаиваться.
                    • Спасибо — попробую ;)
                      Инфы об этом мало очень, а про хорошее кроссбраузерное решение вообще только недавно начали описывать, так что приходиться пользоваться, «а вроде» или «а я где то слышал» )
                      • ну, это совсем не панацея. все блочные элементы в стэке, позиционируются относительно левого верхнего угла, что во многих случаях не катит.
              • >Если уж совсем докапываться
                А я не докапываюсь, просто недоумеваю, почему самое известное решение, которое давно-давно публикуется (на хабре в частности) прошло мимо автора.

                >смело отказываться от float в пользу display:inline-block
                хрен не есть такой сладкий как редька (с). но это лучше overflow

                > вариант с overflow в большинстве случаев быстрее, семантичнее и безгеморройнее вариантов с добавочными (псевдо)элементами…
                Я же объяснил — может возникнуть геморрой со всякими popup элементами привязанными к блокам внутри overflow.

                Семантичность — это не мой идол. Поэтому я не понимаю какое отношение к семантике имеет то или иное css-свойство отвлеченного класса ".clearfix"?

                • НЛО прилетело и опубликовало эту надпись здесь.
                  • >Само свойство — очевидно, никакого. А вот целый элемент
                    > (пустой), единственное назначение которого — исправить нежелательное
                    Ну так речи то о доп.элементе нет. Есть речь о классе котейнера с float элементами.
                    • НЛО прилетело и опубликовало эту надпись здесь.
                      • До псевдоэлементов-невидимок джедаи семантики пока не добрались.
                  • вообще, вкладывать попапы в сами элементы — дурная практика. например, если у дяди з-индекс больше, чем у родителя, то дядя будет сверху «попапа».
  • Побольше бы таких полезных заметок. Спасибо.
  • А упомянутый вами тег 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) :). будет ещё одна статья — продолжение)
  • Я вас люблю… Лет шесть у меня была нерешённая проблема с высотой контейнера. Вот решил, благодаря этой статье.
    • ну… через overflow:auto, а не overflow:hidden, но всё-равно… век живи — век учить…
    • ого! а в чём там было дело? расскажите-покажите!)
    • >лет шесть у меня была нерешённая проблема с высотой контейнера.
      Век живи, век учись. А к горшку вас давно приучили?
  • Methods for Containing Floats — хорошая подборка примеров.

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

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

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