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 работает точно также — создаёт отдельный контекст форматирования для выбранного элемента.

    Эта же статья на моём сайте Clear или overflow:hidden — очистка всего потока или создание контекста форматирования
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 75
    • –4
      Не верстальщик, но иногда приходится править «кривые руки»… самому времени не было разобраться с семантикой, а тут — отличная министатейка )))
      • +2
        Со свойством overflow надо быть осторожным, если внутри элемента с overflow:hidden, будет ссылка-якорь на текущую страницу, то вместо прокрутки страницы к нужному месту, мы получим прокрутку внутри элемента с overflow:hidden
        • 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 помог обойти одну недоработку. Спасибо.

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