Clearfix CSS избавление от ошибок при отображении плавающих элементов в любом браузере


Содержание материала:

Какие методы «clearfix» можно использовать?

У меня есть старая проблема обтекания div двухколоночного макета. Моя боковая панель плавает, поэтому мой контейнер div не может обернуть содержимое и боковую панель.

Кажется, существует множество методов исправления явной ошибки в Firefox:

В моей ситуации единственный, который, кажется, работает правильно, — это решение
, которое немного немного изворотливое. overflow:auto дает мне неприятные полосы прокрутки, а overflow:hidden обязательно имеет побочные эффекты. Кроме того, IE7, по-видимому, не должен страдать от этой проблемы из-за ее неправильного поведения, но в моей ситуации он страдает так же, как Firefox.

Какой метод, доступный в настоящее время для нас, является наиболее надежным?

В зависимости от создаваемого проекта каждый из нижеприведенных решений clearfix CSS имеет свои преимущества.

У clearfix есть полезные приложения, но он также использовался как хак. Прежде чем использовать clearfix, возможно, эти современные css-решения могут быть полезны:

Современные решения Clearfix

Контейнер с overflow: auto;

Самый простой способ очистить плавающие элементы — это использование overflow: auto стиля overflow: auto для содержащего элемента. Это решение работает во всех современных браузерах.

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

Использование «переполнения: скрытое» также является решением clearfix, но не имеет полос прокрутки, однако использование hidden содержимого обрезает любой контент, расположенный за пределами содержащего элемента.

Примечание. В этом примере плавающий элемент является тегом img , но может быть любым элементом html.

Clearfix Reloaded

Тьерри Кобленц на CSSMojo написал: Самое последнее обновление clearfix. Он отметил, что, отказавшись от поддержки oldIE, решение может быть упрощено до одной инструкции css. Кроме того, использование display: block (вместо display: table ) позволяет полям рушиться должным образом, когда элементы с clearfix являются братьями и сестрами.

Это самая современная версия clearfix.

Старые решения Clearfix

Нижеприведенные решения не нужны для современных браузеров, но могут быть полезны для ориентации на старые браузеры.

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

Они перечислены примерно в хронологическом порядке.

«Beat That ClearFix», clearfix для современных браузеров

Тьерри Кобленц из CSS Mojo отметил, что при ориентации на современные браузеры мы можем теперь отказаться от zoom и ::before свойства/значений и просто использовать:

Это решение не поддерживает IE 6/7. специально!

Тьерри также предлагает: » Предупреждение: если вы начинаете новый проект с нуля, пойдите для него, но не перепутайте эту технику с тем, который у вас есть сейчас, потому что, хотя вы не поддерживаете oldIE, ваши существующие правила предотвращают сбрасывание полей «.

Micro Clearfix

Последнее и глобально принятое решение clearfix, Micro Clearfix от Nicolas Gallagher.

Известная поддержка: Firefox 3. 5+, Safari 4+, Chrome, Opera 9+, IE 6+

Свойство переполнения

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

http://www.quirksmode.org/css/clearing.html — объясняет, как разрешить общие проблемы, связанные с этим методом, а именно: установить width: 100% на контейнере.

Вместо использования свойства display для установки «hasLayout» для IE другие свойства могут использоваться для запуска «hasLayout» для элемента.

Другой способ очистить поплавки с использованием свойства overflow — это использовать подделку подчёркивания. IE будет применять значения с префиксом подчеркивания, другие браузеры не будут. zoom свойств zoom hasLayout в IE:

Хотя это работает. не рекомендуется использовать хаки.

PIE: простой способ очистки

Этот более старый метод «Easy Clearing» имеет то преимущество, что позволяет позиционировать элементы за пределами границ контейнера за счет более сложного CSS.

Это решение довольно старое, но вы можете узнать все о Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Элемент, использующий свойство «clear»

Быстрое и грязное решение (с некоторыми недостатками), когда вы быстро шлепаете что-то вместе:

Недостатки

  • Он не реагирует и, таким образом, не может обеспечить желаемый эффект, если стили макета меняются в зависимости от медиа-запросов. Решение в чистом CSS является более идеальным.
  • Он добавляет разметку HTML без необходимости добавления семантического значения.
  • Для этого требуется встроенное определение и решение для каждого экземпляра, а не ссылка класса на одно решение «clearfix» в css и класс, ссылающиеся на него в html.
  • Это делает код трудным для работы с другими, поскольку им, возможно, придется писать больше хаков, чтобы обойти его.
  • В будущем, когда вам нужно/нужно использовать другое решение clearfix, вам не нужно будет возвращаться и удалять каждый
    тега»], замусоренного вокруг разметки.

Какие проблемы мы пытаемся решить?

Есть два важных соображения, когда плавающие вещи:

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

Изоляция потомков от внешних поплавков. Это означает, что потомки внутри элемента должны иметь возможность использовать clear: both и не взаимодействовать с плавающими элементами вне элемента.

clear: both interacting with a float elsewhere in the DOM» />

Блокировать контексты форматирования

Есть только один способ сделать оба этих. И это установить новый контекст форматирования блока. Элементы, которые устанавливают контекст форматирования блока, представляют собой изолированный прямоугольник, в котором поплавки взаимодействуют друг с другом. Контекст форматирования блока всегда будет достаточно высоким для визуального переноса его плавающих потомков, и никакие плавающие объекты вне контекста форматирования блока не могут взаимодействовать с элементами внутри. Эта двусторонняя изоляция — именно то, что вы хотите. В IE эта же концепция называется hasLayout, которую можно установить с помощью zoom: 1 .

Есть несколько способов установить контекст форматирования блока, но я рекомендую решение: display: inline-block with width: 100% . (Конечно, существуют обычные предостережения с использованием width: 100% , поэтому используйте box-sizing: border-box или поместите padding , margin и border на другой элемент.)

Самое надежное решение

Вероятно, наиболее распространенным применением поплавков является двухколонный макет. (Может быть расширен до трех столбцов.)

Сначала разметка структуры.

Попробуй сам

Перейдите к JS Bin, чтобы поиграть с кодом и посмотреть, как это решение строится с нуля.

Традиционные методы исправления ошибок считаются вредными

Проблема с традиционными решениями clearfix заключается в том, что они используют две разные концепции рендеринга для достижения одной и той же цели для IE и всех остальных. В IE они используют hasLayout для установки нового контекста форматирования блока, но для всех остальных они используют сгенерированные блоки ( :after ) с clear: both , что не устанавливает новый контекст форматирования блока. Это означает, что вещи не будут вести себя одинаково во всех ситуациях. Для объяснения, почему это плохо, см. Все, что вы знаете о Clearfix, неправильно.

Стандартизован сброс обтекания (clearfix)

При вёрстке веб-страниц часто требуется гарантировать, что плавающие (float-) элементы целиком уместятся по высоте в содержащем их элементе-контейнере и при этом не повлияют на применение к нему стилей (например, фонового цвета). Многие годы единственным стандартизированным механизмом такого рода было CSS-свойство clear , позволявшее сбросить обтекание элементов, расположенных в документе перед соответствующим элементом.

Новое значение flow-root CSS-свойства display позволяет явным образом ограничить область расположения плавающих блоков произвольным HTML-элементом, превратив его в изолированный блочный контекст форматирования, и уже доступно в Firefox Nightly.

Прежние подходы

До текущего момента веб-разработчики были вынуждены привязывать сброс обтекания к семантически бессмысленному пустому элементу, расположенному в конце соответствующего контейнера (а после появления и широкого распространения IE8 — к CSS-псевдоэлементу), либо использовать не по назначению другие возможности CSS с неизбежными побочными эффектами — например, overflow: hidden .

Пожалуй, наиболее широко сейчас применяется метод с использованием псевдоэлемента, исторически получивший название clearfix.

Препроцессоры

Хотя благодаря CSS-препроцессорам типа SCSS для применения сброса обтекания к конкретному контейнеру достаточно просто подключить небольшой mixin, это было не очень удобно, т. к. , в частности, регулярно приводило к ситуациям, когда веб-разработчик пытался использовать тот же псевдоэлемент (уже «израсходованный» для сброса обтекания) для других целей.

Стандартизация

Спустя всего 20 лет после создания CSS задача ограничения области обтекания пределами заданного элемента наконец получила легитимное, стандартизированное решение. Черновая спецификация «CSS Display Module Level 3» определяет новое значение CSS-свойства display — flow-root , предназначенное именно для явного создания изолированного блочного контекста.

Ранее для аналогичной цели предполагалось использовать свойства min-height и min-width со значением contain-floats , что было описано в черновой спецификации «CSS Intrinsic & Extrinsic Sizing Module Level 3» от сентября 2012 года. Но впоследствии от странноватой идеи помещать в свойства min-height и min-width нечисловые значения, не имеющие смысла для родственных свойств height и width , было решено отказаться в пользу более подходящего по смыслу свойства display .

Реализации

После этого публикация соответствующих запросов на реализацию функциональности (feature request) для всех основных браузеров и движков (Firefox, Chromium, WebKit, Edge) была делом техники (хотя применительно к продукту Microsoft не обошлось без таких характерных сюрпризов, как неожиданные трудности при авторизации, «подвисания» браузера и необходимость использовать для feature-request’ов отдельный сайт UserVoice, т. к. баг-трекер Microsoft, как выяснилось опытным путём, предназначен исключительно для багов).

Более того, спустя всего три недели возможность уже была реализована в Firefox Nightly и будет доступна в стабильных выпусках Firefox начиная с версии 53, выход которой запланирован на 18 апреля 2020 года. Причём в первой реализации была досадная ошибка: блочный элемент, снабжённый объявлением display: flow-root , вместо ожидаемой для блочных элементов ширины 100% получал ширину по содержимому (подобно таблицам); но этот баг был оперативно устранён.

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

Обновлено ( 2020-02-18 ): Поддержка display: flow-root реализована в Chromium и будет доступна в стабильных сборках Chrome начиная с версии 58, выпуск которой ожидается в апреле . Протестировать функцию сейчас можно с помощью предварительных сборок Chrome Canary.

Обновлено ( 2020-03-13 ): Поддержка display: flow-root доступна в Opera 45 (сейчас доступны предварительные Developer-сборки), основанной на Chromium 58.

Кстати, опубликована новая авторская музыкальная композиция «Curiosity» (первая за 2,5 года).

Возможно это мой пунктик, но я всё-таки всегда подчеркиваю, что действие clear (на чем основан clearfix) и создание нового блочного контекста форматирования (побочный эффект overflow:hidden/auto, display:inline-block/table-*, float для самого контейнера и т.п. и основное действие нового стандартного значения display) — существенно разные механизмы. В частности, на поведение clearfix могут неожиданно повлиять другие float-элементы (напр. соседние колонки), а при некоторых разновидностях clearfix margin-ы обычных (не плавающих) потомков «схлопываются» с margin-ами самого контейнера и его соседей, в отличие от элемента с отдельным контекстом форматирования.

Так что, хотя часто эти приемы используются для решения одной задачи (на английском у нее есть устоявшееся название «containing floats», к сожалению, не встречал хорошего русского соответствия), в общем случае они не взаимозаменяемы, у них разные ограничения и новичкам желательно сразу это понимать. Да, среди русскоязычных разработчиков часто все эти приемы собирательно называют «клирфиксами», но, на мой взгляд, это неправильно (примерно как столь же популярное «альт-текст» применительно к всплывающей подсказке). В тексте статьи никакой путаницы нет, но вот к заголовку я, при всём уважении, не могу не придраться:)

И еще хочу спросить: будут ли поддерживаться составные значения display из нового модуля, типа упомянутого в том баге ‘display: block flow-root’ или ‘display: list-item inline flow’?

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

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

будут ли поддерживаться составные значения display из нового модуля, типа упомянутого в том баге ‘display: block flow-root’ или ‘display: list-item inline flow’?

Судя по комментарию Мэтса Палмгрена из Mozilla, пока речь идёт только о поддержке flow-root . Собственно, так быстро за реализацию функции взялись, скорее всего, именно благодаря её технической простоте (все необходимые архитектурные составляющие в браузерах уже существовали ранее) на фоне большой востребованности в веб-разработке. И по словам Таба Аткинса в списке рассылки www-style@w3.org, большинство сочетаний новых ключевых слов на самом деле функционально эквивалентны существующим и поддерживаемым значениям. Например, сочетание inline flow-root эквивалентно значению inline-block .

Топ-пост этого месяца:  Как в Joomla сделать, изменить, редактировать главную страницу сайта

Марат, спасибо за ответ!

Насчет заголовка — очень понимаю, без компромисса там никак (плюс еще SEO учесть надо). Но если добавить всего одно слово (напр. «Стандартизован сброс обтекания (*вместо* clearfix)»), это уже не будет компромиссом?

Насчет соответствий полных значений существующим — не спорю. Действительно, формально ведь не хватало только ‘block flow-root’ (и теперь будет в виде просто ‘flow-root’), ‘block ruby’ (но он и не нужен:) и ‘list-item inline *’ (нужен очень редко и при нужде эмулируется псевдоэлементами). Хотя сама возможность управлять внешним и внутренним поведением блока по отдельности в новой спецификации выглядит интересно. )

Время обновить clearfix

Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов.

Clearfix раньше

Если вы знаете что такое clearfix, то вероятно вы читали о нем в старых статьях и книгах. В которых встречали следующий код или его разновидности:

Он рабочий, но проблема в том, что он поддерживает устаревшие IE 6/7 . Вы еще поддерживаете эти браузеры?


Clearfix сейчас

Если у вас поддержка браузеров начиная с IE 8 , то воспользуйтесь сокращенной версией:

Немножко экономии и эстетической красоты ��
Я редко пользуюсь этим классом, ведь установив у контейнера значение overflow в hidden или auto мы добиваемся тех-же результатов.
А вы используете clearfix css в своих проектах? ��

UPD #1: Хорошая статья про виды clearfix и их работе можно прочитать в этой статье.

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Clearfix на CSS

Многие верстальщики слышали о clearfix на CSS. Clearfix — метод отмены действия float без изменения структуры HTML-документа. Данный метод некоторыми верстальщиками весьма активно используется, поэтому я решил о нём Вам рассказать в данной статье.

Давайте разберём такой пример:

Всё бы ничего, но блок «Подвал сайта» оказался то же справа от картинки, а не под ней. Какое решение этой проблемы? Совершенно очевидно, что надо просто добавить ещё один блок, отменяющий действие float:

Теперь всё встаёт на свои места, однако, мы изменили структуру HTML-кода, добавив в него непонятный пустой блок. Так вот clearfix позволяет избежать этого. Никакого блока добавлять не нужно, а достаточно написать в CSS-коде так:

#article:after <
content: » «;
clear: both;
display: table;
>

Псевдоэлемент after позволяет вывести некий контент после содержимого элемента. Этот контент задаётся в свойстве content. Так же этот контент делается табличным элементом и у него отменяется действие float.

Этот способ работает во всех современных браузерах, поэтому он является кроссбраузерным.

От себя добавлю, что я привык добавлять блок с clear: both; в HTML, но познакомить Вас с clearfix в CSS я тоже считал нужным.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Все, что вам известно о clearfix — неверно

    Перевод статьи: Everything you Know about Clearfix is Wrong.
    Автор: Thierry Koblentz.

    Что такое clearfix?

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

    Как это работает?

      В браузерах, поддерживающих псевдоэлемент :after данный хак генерирует контент (находящийся сразу же за содержимым форматируемого элемента), которому назначаются CSS свойства, отменяющие обтекание плавающих дочерних элементов. Короче говоря, это дает примерно тот же эффект, что и включение структурного элемента

    В результате имеем.

    Из последнего пункта следует то, что в IE, и только в IE, хак clearfix создаст иную конструкцию. Это связано с тем, что контекст блочного форматирования:

    1. содержит в себе плавающие элементы;
    2. предотвращает объединение полей ( margins );
    3. не должен накладываться на плавающие элементы, находящиеся в том же контексте блочного форматирования (согласно пукту 9.5 спецификации).

    Отрицательные стороны.

    Все напрямую зависит от компоновки вашего документа и стилизации его элементов. Поэтому результаты применения хака clearfix могут быть непредсказуемыми. К примеру, на этом простом демо (иллюстрирующем случаи, упомянутые в первых двух пунктах предыдущего списка) можно увидеть различия визуализации в IE и в, так называемых, современных браузерах:

    • В Mozilla, WebKit, и т.д.:
      • Имеющиеся на странице три заголовка расположены на разных уровнях по вертикали.
      • Высота зазора сверху контейнера .wrapper (который содержит фоновое изображение) превышает 20px.
      • Плавающий блок .floatMe отображается за пределами контейнера wrapper .
    • В IE:
      • Все три заголовка выровнены по вертикали.
      • Высота зазора над контейнером .wrapper , составляет половину той, которая имеет место в современных браузерах.
      • Плавающий блок размещен в рамках элемента контейнера.

    Что это дает?

    Все эти различия объясняются очень просто:

      В IE:

        Блоку .wrapper назначено свойство hasLayout (так как он имеет фиксированное значение свойства width ), поэтому он образует новый контекст блочного форматирования. Это предотвращает схлопывание поля элемента параграфа (черный блок) и поля заголовка, находящегося в элементе контейнере. Иначе говоря, верхний зазор – это нижнее поле margin-bottom черного блока (элемента

      ).

    • Плавающий блок находится в контейнере .wrapper , так как согласно спецификации, блочный контекст форматирования обязан включать все внутренние смещенные элементы (т.е. floats).
  • В современных браузерах:
    • Все присутствующие элементы находятся в одном контексте блочного форматирования, поэтому прилегающие поля ( margins ) объединяются. Поле внутреннего заголовка выходит за пределы контейнера .wrapper и упирается в край элемента параграфа

      . В отличие от того что происходит в IE, здесь верхний зазор между контейнером и черным блоком образуется не нижним полем ( margin-bottom ) параграфа, а верхним полем ( margin-top ) заголовка.

    • По этой же причине плавающий .floatMe блок не находится в рамках родительского элемента .wrapper .
  • В данной ситуации мы не имеем дело с никаким багом. А причиной разногласий визуализации в IE и современных браузерах является тот факт, что мы просто применяем различное стилевое форматирование элемента .wrapper в рамках нашего тестового макета.

    Теперь взгляните на второй вариант демо страницы, где блок .wrapper образует новый контекст блочного форматирования как в IE, так и в других браузерах. В общем, все выглядит намного лучше (да, в IE внизу плавающего блока присутствует зазор, что является багом, обусловленным тем, что для .wrapper установлено свойство hasLayout ).

    Как это связано с clearfix.

    Давайте предположим, что мы недостаточно знакомы с таким понятием как блочный контекст форматирования и вместо того, чтобы назначить необходимые свойства стилей блоку контейнеру .wrapper , как мы это делали на предыдущем шаге, мы просто применим clearfix к диву

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

    Что же произошло?

    Плавающий блок .floatMe включен, но в IE макет страницы нарушен, а именно – средняя колонка смещена вниз относительно боковых колонок. Это произошло потому, что согласно пункту 9.5 спецификации, контекст блочного форматирования не должен перекрывать плавающие элементы, находящиеся с ним в одном блочном контексте форматирования (как было указано выше в третьем пункте).

    Теперь элемент, реализующий среднюю колонку .mainContent получил hasLayout (благодаря применению к нему хака clearfix>), в результате чего он создает новый контекст блочного форматирования, который уже не вмещается в пространство между двумя боковыми колонками и по этой причине смещается вниз.

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

    Совершенно не подозревая в этом clearfix и полагая, что созданный ими макет страницы более или менее отвечает условиям кроссбраузерности (не учитывая обнуление значений внутренних отступов и необходимость предотвращения схлопывания полей).

    Как можно исправить ситуацию.

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

    Применяя необходимые стили для обеих элементов – контейнера .wrapper и средней колонки .mainContent , создающие блочный контекст форматирования (к примеру, для .wrapper определить display:inline-block а для .mainContent установить свойство overflow:hidden ) вы решите проблему. В этом можно убедиться, взглянув на последний вариант нашего примера.

    Подытожим все вышесказанное.

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

    Зачастую разработчики манипулируют свойством hasLayout не задумываясь над тем, чтобы вместо этого использовать необходимые свойства стилей, что позволит решить проблему кроссбраузерно. Именно поэтому они, в конечном итоге, добавляют отдельные свойства для IE (в виде хаков) для «залатывания» дыр в своих стилях.

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

    Я сам применяю clearfix для форматирования модальных окон и других подобных им элементов, точно зная, что в текущем контексте блочного форматирования нет плавающих элементов. Более того, я с уверенностью использовал его при создании своего фреймворка.

    Очистка float

    При правильном использовании float превращается в мощный инструмент вёрстки, применяемый для выравнивания и упорядочивания элементов. Однако чтобы держать этот инструмент под контролем, необходим противовес, без которого огромный потенциал float сужается до пары узких задач. Речь идёт об отмене обтекания с помощью разных методов. Перечислим несколько наиболее популярных.

    Ширина элементов

    Если обтекаемые элементы будет занимать всю доступную ширину, то остальные элементы, следующие за ними, будут начинаться с новой строки. Для этого суммарная ширина элементов должна равняться 100%. В примере 1 показано создание стрелок на одной строке.

    Пример 1. Использование width

    Каждый блок со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после arrow , начинается с новой строки.

    Данный метод применяется редко, поскольку не всегда можно явно указать ширину элементов, к тому же метод не решает проблему с высотой блока и его фоном (рис. 1).

    Рис. 1. Нет фоновой заливки

    Использование overflow

    Свойство overflow управляет отображением содержимого блока, если оно целиком не помещается и выходит за область заданных размеров. Значение auto , в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto , scroll или hidden отменяет действие float (пример 2).

    Пример 2. Применение overflow

    Результат после применения свойства overflow сразу меняется (рис. 2).

    Рис. 2. Влияние свойства overflow на фон

    overflow — одно из самых популярных свойств, работающее в связке со свойством float . Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы блока, при этом он будет «обрезан». В примере 3 картинка сдвигается влево от своего исходного положения.

    Пример 3. Обрезание области элемента

    Результат примера показан на рис. 3.

    Рис. 3. Обрезание картинки

    Свойство clear

    Для отмены действия float от вышестоящего элемента применяется свойство clear со следующими значениями:

    • left — отменяет действие значения left у float ;
    • right — отменяет действие значения right у float ;
    • both — одновременно отменяет действие значений left и right у float . Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.


    Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после элемента с float . Обычно вводят универсальный класс, к примеру, clearfix и вставляют пустой

    Пример 4. Использование clear

    В данном примере для класса clearfix установлено свойство clear со значением both .

    Использование clear является одним из самых популярных в вёрстке в силу простоты и универсальности. Но иногда возникают комбинации, в которых использование clear даёт сбой. Это происходит, когда в коде встречается одновременно несколько разных обтекаемых элементов. Так, в примере 5 с помощью float создаются две колонки, а в правой колонке float упорядочивает фотографии.

    Пример 5. Использование clear

    Результат примера показан на рис. 4. Свойство clear действует не только на класс photo , но и на класс col1 , т. е. на все элементы выше, у которых установлено float . Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.

    Рис. 4. Ошибка с отображением строки

    В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearfix . Колонка приобретёт следующий вид.

    Псевдоэлемент ::after

    Частое включение пустого элемента

    Вместо значения block у display иногда вставляют значение table , но смысл это не меняет, так же как и набор других возможных свойств. Их задача — создать невидимый блок, который будет отменять действие float у вышестоящих элементов.

    Поскольку текст, генерируемый через псевдоэлемент ::after , располагается после содержимого элемента, он с лёгкостью заменяет конструкцию

    Пример 6. Псевдоэлемент ::after

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

    The Clearfix: Force an Element To Self-Clear its Children

    Easily manage projects with monday.com

    This will do you fine these days (IE 8 and up):

    Apply it to any parent element in which you need to clear the floats. For example:

    You would use this instead of clearing the float with something like
    at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like overflow: hidden; on the parent (you don’t always want to hide overflow).

    Now for a bit of history!

    This was the original popular version, designed to support browsers as far back as it possibly could:

    There then was a bit of a cleaner version documented here by Jeff Starr, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about.

    Then it became popular to use «group» as a class name, which is nicer and more semantic (via Dan Cederholm). Also, the content property doesn’t even need the space, it can be empty string (via Nicolas Gallagher). Then, without any text, font-size is un-needed (Chris Coyier).

    Of course, if you drop IE 6 or 7 support, remove the associated lines.

    See the top of this page for the most modern version of the clearfix.

    Comments

    just so i’m clear: would this be for child elements that are floated, and thus the parent element disappears?

    i’ve found that applying overflow: hidden; to the parent element takes care of this. the parent element then fills in behind the child elements.

    Yes that is right, but overflow: hidden; also hides the overflow, which may be undesirable behavior in some circumstances.

    overflow: auto;
    works well as long as you are able to keep control of your margins and padding (else you see scrollbars). That’s ironic. 🙂

    Chris Coyier said: Yes that is right, but overflow: hidden; also hides the overflow, which may be undesirable behavior in some circumstances.””

    Quick links menu, ul,li used custom select list etc (those are absolute positioned) are the some circumstances.

    lol just so you’re “clear” haha 🙂

    I’m only using, and i diden’t see errors on testing websites.

    I still use this religiously. I rarely fails me and has worked cross browser extremely well.

    Only time I get a hiccup with it is when I had a fluid container that was floated left or right. I would get a large gap underneath one of the elements when clearfix was in place.

    Rocking ! I ve always had a confusion on judging whether to use the markup based clear or this one. This is cool … but still have to test it in a pretty bigger application.

    Im concerned about the .clearfix, block. Im not sure if this would be 100% perfect in a application of a high volume of markups / complex layouts. Correct me if wrong.

    The edit and delete functionality of this comment section just rocks :). Im loving the counter … great user experience and awesome interaction design. Keep it going chris !

    Chris – you, like Mary Poppins, are practically perfect in every way, except for it’s and its. So in order to help you attain a higher level of perfection, I am going to give you a free lesson. (are you excited yet?)

    Possessive pronouns: his, hers, theirs, ours, mine, yours, whose, and its
    Notice no apostrophes on any of those – just think “his, hers, its” to help you remember that.

    Contraction: It is shortens to it’s, he is => he’s, she is => she’s, I am => I’m, you are => you’re, they are => they’re, we are => we’re, who is => who’s

    For pronouns, the only apostrophes are for contractions as shown above. Regular nouns do use apostrophes to show possession but not pronouns.

    So your title for this post should be “Force Element To Self-Clear its Children” (not it’s). I see this mistake a lot in your posts, but this one stands out even more since it’s in the title.

    Whew! That out of the way (and seeing those errors really does get in the way of content), you are awesome and I have learned SO much from you – I hope my little grammar lesson actually helps!

    And, on topic, thank you for THIS helpful snippet!

    Как сделать — Clearfix

    Узнайте, как очистить плавает с «clearfix» Hack.

    Как очистить поплавки (Clearfix)

    Элементы после плавающего элемента будет течь вокруг него. Используйте «clearfix» рубить, чтобы решить проблему:

    Without Clearfix

    With Clearfix

    Clearfix Hack

    Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера.

    Затем мы можем добавить overflow: auto; к содержащей элемент для решения этой проблемы:

    Пример

    Переполнение: Auto clearfix работает хорошо, пока вы в состоянии держать контроль над полями и обивка (иначе вы можете увидеть полосы прокрутки). новый, современный clearfix Hack тем не менее, является более безопасным в использовании, и следующий код используется для большинства веб-страниц:

    Пример

    Совет: Узнайте больше о поплавках в нашем учебнике по CSS float.

    Clearfix CSS: избавление от ошибок при отображении плавающих элементов в любом браузере

    Ну и самое печальное тут то, что последний абзац с clear:both оказался под левой колонкой, растягивая собой правую по высоте. Это опять же из-за того, что левая колонка и плавающая картинка в правой колонке остались в одном и том же контексте форматирования, поэтому clear реагирует и на то, и на другое.

    Это какраз то что я писал тебе по поводу различий между overflow и clear:both и лечение указывал c помощью нижнего марджина.
    остальные могут ознакомиться тут http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html в коментариях к статье я это тоже описывал.

    короче вот так это можно сделать http://jsfiddle.net/4nAyZ/12/

    по поводу этого:
    .clearfix:after <
    clear: both;
    content: «.»;
    display: block;
    height: 0;
    visibility: hidden;
    >
    Зачем этот лишний код оно давно уже не нужно, вот так проще
    .clearfix:after <
    content: «»;
    display: block;
    clear: both;
    >

    Не правильная ссылка на пример не сохранилась чегото
    Вот нормальная http://jsfiddle.net/4nAyZ/14/

    troll

    А если ниже будет еще один блок (скажем, подвал), и левая колонка будет выше правой?

    Но этот способ и не расчитан для такого.

    Вообще по поводу колончной разметки где много вещей интересных решается и ещё некоторых моментов я скинул свои разарботки psywalker’у, сейчас уточню будет ли он статью по ним писать…

    psywalker (Автор записи)

    Да, обязательно будем! Но эти вещи требуют времени.

    SelenIT

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

    Но тут цельность правой колонки держится на ее левом margin-е, равном ширине левой колонки. В ситуации, для которой мне понадобился метод из статьи, ширина левой колонки у меня была непредсказуемой (нужно было предусмотреть ситуацию, когда она вообще исчезает и правую надо растянуть на весь контейнер), поэтому вариант с margin-ом мне не подошел в принципе. Ну и ситуация, о которой чуть ниже пишет troll, в моей задаче тоже была вполне вероятна. Поэтому пришлось искать вариант, при котором всё определялось бы фактической доступной шириной — как при overflow , но без его ограничений. И такой вариант нашелся 🙂

    SelenIT

    В статье для примера clearfix-а взят вариант отсюда, точки в контенте там уже нет, а visibility и height, видимо, остались «по традиции». Сейчас набирает популярность т.н. «micro clearfix» — c display:table вместо block для псевдика, чтобы заодно и маргины из блока не вываливались.

    Но лично мне с непустым контентом (чтобы и FF3.x поняли) как-то спокойнее :). А в методе из статьи в контенте псевдика вся «соль». Хотя в старых FF и у него может быть проблема (позиционирование из элемента с display:table ), но что делать, вёрстка пока не может без компромиссов.

    О прикольно новый клиарфикс, щас ознакомлюсь! спасибо.

    А с чем связанно то что через нулевую таблицу поля не проходят? а то у меня с шиллингом печаль ка. Типа то что внутри табличных элементов (tr, td…) полей не может быть, соответственно они и не могут вылазить?

    SelenIT

    В спецификации сказано, что поля блока могут проходить его насквозь (т.е. верхнее и нижнее поля самого элемента схлопываются в одно и могут схлопываться с полями соседей или родителя), если у этого блока нет не вырванных из потока детей, его итоговая высота равна нулю и он не создает нового контекста форматирования. У таблицы (даже пустой и нулевой) не выполняется третье условие — контекст форматирования она создает. И это разделяет любые поля сверху и снизу от таблицы, аналогично как если бы у таблицы был бордер.

    шиллингом имел виду инглишом

    alexriz

    Что-то в opera 11.64 дикий перекос с этим клирфиксом вышел….
    Все растянулось вширь до 8191px

    psywalker (Автор записи)

    Хм… странно, у меня всё в порядке.

    alexriz

    В опере и хроме, в некоторых ситуациях и не такие большие (в FF не обратил внимания), появляются отступы снизу, под элементом с клирфиксом. Я пытался их убрать с помощью font-size:0; и line-height:0; в ПЭ. Везде прокатило, а оперу перекосило… Вот такая вот неприятная бяка.

    psywalker (Автор записи)

    А можешь сделать тестовый пример плз?

    alexriz

    Там кнопочку по нажимайте, с начала стандартный режим, а потом, то что вышло у меня.
    Правда отступ в хроме воспроизвести тоже не удалось. Хотя если в блоке который оборачивает кнопку, убрать padding, то будет не большой отступ от блока сверху до кнопки в стандартном режиме.

    alexriz

    пардон у кнопки margin по-умолчанию есть не большой в хроме) Значит не получилось воспроизвести


    SelenIT

    Спасибо за багрепорт! Отступ в Опере действительно возникает. Лечится заменой display:table на table-cell для самой колонки (в др. браузерах, вроде, хуже не становится, разве что margin-ы для колонки применить уже не получится), визуально устраняется также при font-size: 1px для ПЭ. В Хроме (19-м) воспроизвести проблему не удалось (кстати, clear для ПЭ не нужен, его единственная задача — «распереть» контейнер).

    Ох уж эта шалунья Опера, вечно засовывающая псевдоэлементы при display: table не туда (у нее они всегда чем-то вроде table-row оказываются)… Обидно, конечно. Но это поведение псевдоэлементов — явный оперный баг (а уж поведение при нулевом font-size — и подавно). Будем требовать фикса!

    alexriz

    Ну, вот стоило мне написать о проблеме и сделать тестовый пример проблемы, у меня получилось решить проблему в лоб, при чем тем же методом, что я и делал.

    Если переключиться на мою редакцию теперь не рассыпается и отступа нет. В основе все тот же клирфикс, что и был.

    psywalker (Автор записи)

    Спасибо тебе большое за найденное решение этой траблы)

    Softlink

    Макс, добавь в статью пример решений для Оперы от Ильи и Сани, а то не все будут читать по 20 комментариев под статьей.

    psywalker (Автор записи)

    FireFox 13.0 — Блок не переносится

    psywalker (Автор записи)

    О каком блоке идёт речь? Ткнине носом плз.

    Так же быстро нашлось и решение:
    Блоки обернуть елементом с «float:left»

    Денис

    После добавления первого clearfix’а (через псевдоэлемент .clearfix:after) у меня ничего не изменилось. Даже скопировал и вставил Ваш код, но никакого эффекта. Если смотреть по рисунку, то похоже что у класса .clearfix установлено свойсто position: relative, так как блок с классом .absolute позиционириуется относительного его (блока .clearfix).
    http://jsfiddle.net/FGLM3/

    SelenIT

    Position: relative там действительно есть, только задан (в демке) не для .clearfix, а для .center.

    Денис

    Подскажите пожалуйста глупому нубу, что такое «контекст форматирования»?
    Вот в этой статье говорится про «СТАКАН» — http://softwaremaniacs.org/blog/2005/08/03/css-layout-positioning/#glass . Эт ои есть одно и тоже, «сткан»=»контекст форматирования»?

    SelenIT

    C «контекстами форматирования» в спецификации CSS вообще путаница — у них… нет явного определения! Только описание, в каких случаях контекст возникает и как в нем ведут себя боксы. Только в этом году в W3C задумались над определением этих вещей.

    Иван Сагалаев по ссылке пишет, что под «стаканом» подразумевает «содержащий блок», который может задавать новый блочный контекст при опред. условиях (см. п. 9.4.1 спецификации). Но по его описанию, да, это скорее сам контекст и есть. Примерно так же, как «нечто, откуда не вываливаются margin-ы и куда не проникают float-ы», определить блочный контекст предлагает Алекс Могилевский (представитель Микрософта в W3C).

    Nadyaka

    Прикольное определение. : И понятное однако.)))))

    Денис

    Ой, ошибочка *стакан.
    Или «стакан» пожходит только для позиционируемых элементов?

    passerby

    Спасибо за Ваш здоровский clearfix. Раньше пользовался micro clearfix и частенько возникали проблемы при его использовании, например, в колонках.
    С Вашим пока проблем нет, уже сверстал несколько сайтов — все ок от ie7.
    Но сегодня столкнулся с проблемой при верстке мобильной версии сайта, везде все нормально отображается, а в Opera Mobile по ширине в те самые, наверное, 10 000px выходила. А загвоздка оказалась как раз в хаке для Оперы — для мобильной оперы она лишняя. На всякий случай, информирую 🙂

    psywalker (Автор записи)

    Спасибо за информацию! 🙂

    DelphinPRO

    Доброй ночи.
    Отличное решение, однако выявилась еще одна маленькая проблема.
    Если внутри плавающего блока есть длинная, непереносимая строка (или элемент с заданным свойством white-space: nowrap), то контейнер растягивается на ширину этой строки, часто за пределы экрана. Что, в общем-то и присуще таблице. Здесь я смоделировал подобную ситуацию: http://jsfiddle.net/DelphinPRO/8ppxR/
    Решение проблемы вижу в задании контейнеру ширины 100% и свойства table-layout:fixed. На скорую руку посмотрел в ff, opera и chrome — помогло.

    Странно, что в статье не указано об этом ньюансе. На мой взгляд, чрезвычайно значительном — т.к. вёрстка может просто разваливаться, если внутри блока с display:table находится слишком широкий «монолитный» контент (непереносимая строка или другое). Как уже было сказано — стандартное поведение таблицы — это показать этот контент при любом раскладе, в нашем случае это выходит боком. И решения для этого я пока не вижу и не уверен, что оно вообще есть.

    SelenIT

    Спасибо за справедливое замечание. Вообще, на мой взгляд, не влезающий в колонку контент — ситуация, нештатная сама по себе, и в любом случае придется выбирать какой-то компромисс (либо возможность просмотреть весь «негабаритный» контент ценой разрушения красоты дизайна, либо частичная недоступность самого контента). Возможно, для какого-то информационного сайта меньшим злом будет как раз широкая таблица с горизонтальным скроллингом…

    Но вообще хорошо, что сейчас появляются новые альтернативы float-колонкам (и связанным с ними хакам) — те же флексбоксы.

    amelice

    В общем, по спецификации, для таких вещей, как таблицы, ширина считается по алгоритму shrink-to-fit. Кратко объяснить его суть можно так. Вначале браузер «спрашивает» у контента, сколько бы ему хотелось иметь ширины, чтоб вольготно раскинуться в одну строку, не ломая строки переносами. Если ширина, «запрошенная» контентом, меньше доступной ширины контейнера — именно эта «запрошенная» ширина назначается нашему элементу. Если же нет — назначается такая ширина, чтобы элемент вплотную вписался в доступную ширину контейнера, а контенту волей-неволей приходится втискиваться в эту ширину, перенося строки.

    За вот это пояснение большое спасибо!
    Статья очень понравилась, особенно — пояснения к каждому методу, недостатки, выводы. Читала уже, но, возвращаюсь снова. Спасибо. 🙂

    thanks

    Почему-то опера не растягивает clearfix-блок на 100%, ширина только по содержимому.
    Приходится дополнительно прописывать для Оперы 100% ширины, даже в ИЕ7 все ок, отчего так?
    Структура простая, например что-то вроде этого:

    thanks

    Прошу прощения, не совсем точно выразился.
    Не на всю ширину родителя Опера тянет.
    Например, если условно ширина родителя равна 100%, а плавающих блоков внутри clearfix — 30% + 40%, то clearfix получается 70%, а не 100%.
    Вот такая Опера бяка!

    kokosan

    Проблема overflow:hidden как я понял, заключается только в блоках с абсолютом? Тогда есть еще вариант. Тока сомневаюсь, что кто-то ответит. Давно никто не писал. Ответьте че-нить.

    SelenIT

    Не только с абсолютом, с рилативом и отриц. марджинами тоже. С абсолютом, что удивительно, у самого по себе overflow:hidden проблемы нет:)

    kokosan

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

    Elena

    а в опере никто не замечал странного квадратика внизу слева?

    Elena

    Чёт в опере свежей не работает данный метод:
    1 — http://joxi.ru/1LmMUdg5CbBiIczzZ-s

    уже увидел среди комментариев некую вставку со ссылкой на статью, в которой описана эта проблема… было бы здорово, если бы эта «вставка» оказалась прямо вконце статьи…

    alexriz

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

    /* clearfix */
    .clearfix <
    -height: 1%;
    *zoom: 1;
    display: table;
    >
    .clearfix:after <
    content: ‘. . . . . . . . . . .’;
    font: .13em/0 sans-serif;
    display: block;
    word-spacing: 99in;
    height: 0;
    overflow: hidden;
    >
    /* end clearfix */

    SelenIT

    Единственное, что я всё-таки решительно и громко возражаю против названия «clearfix» для этого подхода:). Clearfix-ы, имхо, как раз отличаются тем, что не создают BFC (что хорошо видно из примера к статье), а это решение скорее ближе к overflow:hidden и ему подобным. Думаю, можно называть его как-нибудь вроде «floatfix» или, еще лучше, «bfc-fix».

    Возможно, я пристрастен и придираюсь, но мне кажется, что подчеркнуть эту разницу важно для понимания сути.

    alexriz

    не могу не согласиться с тобой. Это кусок из моего сниппета который я использую, я привык к этому названию просто, оно мне удобно 🙂

    Aleksey

    Интересно, а такому способу будут аргументы против? :

    На странице примера выбираем галочку «Ничего»
    затем у блока с классом «clear-both» убираем стиль «clear: both;»
    добавляем ему стиль
    .clear-both:before <
    display: table;
    content: »;
    width: 100%;
    >
    Блоку с классом «.center» добавляем стиль «margin-left: 200px».

    Вроде бы все поставленные задачи решает.

    Максим Усачев (Автор записи)

    Дело в том, что, во-первых, display-table создаёт свой контекст, что позволяет всем его вложенным элементам, включая плавающие, оставаться внутри него. Т.е. созданный блочный контекст начинает их «чувствовать». В вашем примере этого не происходит. А, во-вторх, благодаря решению Ильи Стрельцына нам не приходится учитывать ширину левой плавающей колонки. У вас это приходится делать при помощи левого margin’a.

    Илья Стрельцын

    К сожалению, совсем не работает в Firefox (32) — псевдоэлемент-распорка, вместо того, чтобы проваливаться под картинку, просто торчит вправо, вызывая горизонтальный скроллинг. Кроме того, трюк с псевдоэлементом не универсален: вместо абзаца могла быть картинка с float:left; clear:left;, к которой его не приделаешь. Наконец, никак не решается проблема выпадения из контейнера последней плавающей картинки. Ну и хардкод для левого отступа, как верно заметил Максим — что, если левая колонка будет резиновой или скрываемой?

    Постановка задачи предполагала, что контентная колонка — «черный ящик», содержимое которого для нас не всегда предсказуемо (напр. генерируется визивигом). И взаимовлияние этого содержимого и его окружения нужно свести к минимуму, насколько возможно.

    Aleksey

    Да, согласен, недоглядел.

    >> Firefox (32) — псевдоэлемент-распорка, вместо того, чтобы проваливаться под картинку, просто торчит вправо, вызывая горизонтальный скроллинг
    У меня в том же FF, псевдоэлемент как раз оказался под картинкой, НО ещё и под левой колонкой. Тоже сначала не заметил этого.

    Роминбобин

    Решил так:
    вставил display: inline-block; элементу и всё!

    SelenIT

    С шириной элемента только не всё. А так, да, еще один вариант, близкий к третьему.

    Роминбобин

    Ширина другое дело.

    Алексей

    Обалденный метод, интересный, но… непонятный 🙁
    Вот то, что Вы пишите, на уровне идеи, в общем-то, понятно, но в общую картину, к сожалению, не складывается… Опыта маловато.
    Вот мы повесили на правый контейнер display: table превратив его в большую ячейку, размеры который, как я понял, выровнялись по содержимому.
    Далее у нас идёт блочный псевдоэлемент
    1) у него свойство font: .1px/0 a — непонятно.
    2) то за счёт чего он растянулся понятно — за счёт огромного word-spacing
    3) Браузер охренев от такого запроса «назначается такая ширина, чтобы элемент вплотную вписался в доступную ширину контейнера» — КАКОГО ИМЕННО контейнера?
    4) Вы пишите «для таких вещей, как таблицы, ширина считается по алгоритму…» — ну ведь псевдоэлемент у нас блочный? какое влияние на него оказывает исходная «таблица»?
    В общем ключевой, наверное, третий вопрос — в какой контейнер и каким образом наши точки (или единицы? и, кстати, где они?) должны вписаться таким чудным образом, чтоб блок, то есть, извиняюсь таблица, простраивала свои размеры не по содержимому, а по величине исходного блока?
    ЗЫ: извините, если не понимаю элементарных вещей, но Вы в этом уже годы, и какие-то вещи кажутся для Вас сами собой разумеющимися… а я пока к ним только привыкаю, поэтому просьба всё-таки разжевать. Спасибо!
    PSPS: кстати, а зачем у левой колонки установлено относительное позиционирование?
    ЗЫЗЫЗЫ: кстати, фраза: «левая колонка и плавающая картинка в правой колонке остались в одном и том же контексте форматирования, поэтому clear реагирует и на то, и на другое.» — в каком именно контексте форматирования, и на что именно и каким образом реагирует clear? 🙂

    SelenIT

    Контексты форматирования — вообще довольно малоизученная область, до совсем недавнего времени в спецификациях CSS не было лучшего определения для них, чем «штука, заставляющая CSS делать раскладку» (серьезно!). Только недавно эти вещи стали более-менее нормально описывать в спецификациях. Так что не понимать их — это не страшно, пока это скорее норма:).

    Попытаюсь ответить на вопросы и объяснить как можно проще. Начну с ответа на ЗЫЗЫЗЫ — именно в нем главный момент, ради которого всё затевалось.

    По умолчанию блоки в CSS выстраиваются друг за другом по одним и тем же правилам: сверху вниз друг за другом в том порядке, в каком они идут в коде, margin-ы между соседними блоками схлопываются, а float-ы «наезжают» на сами блоки, но ужимают их содержимое. Область, в которой действуют эти правила — это и есть блочный контекст форматирования. И свойство clear отменяет у блока обтекание всех предшествующих float-ов во всей этой области. Изначально эта область охватывает всю страницу, но некоторые элементы (ячейки таблиц, инлайн-блоки, сами float-ы, блоки с overflow, флекс-элементы и т.п.) обособлены от нее, в них образуются свои замкнутые «мирки» со своими правилами, а всё, что происходит снаружи, на них не влияет.

    Именно поэтому классический clearfix, основанный на действии clear, не всегда подходит — он «цепляется» не только за плавающее содержимое того контейнера, к которому применен, но и за все предыдущие плавающие элементы на странице. Например, как в примере из статьи, за левую колонку. Поэтому нам нужно обособить правую колонку, чтобы в ней образовался как раз изолированный «мирок» — отдельный, не зависящий от остальной страницы блочный контекст форматирования. Чаще всего для этого используют oveflow, но у него свои ограничения.

    display:table заставляет правую колонку форматироваться как таблицу, а ее содержимое — как ячейку таблицы. Тем самым это содержимое оказывается в своем отдельном контексте форматирования, чего мы и добивались. Но возникает побочный эффект — таблица не всегда занимает всю доступную ширину родителя, если в ней контента меньше, она оказывается уже. С этим эффектом мы и боремся с помощью хака с псевдоэлементом.

    1) font: .1px/0 a — самая короткая запись для того, чтобы текст псевдоэлемента стал невидимым и не занимал места. В одной строке мы задаем font-size меньше пикселя (можно было и 0, но на момент публикации с нулем в некоторых браузерах бывали проблемы), нулевую line-height, и указываем букву «a» вместо имени шрифта для того, чтобы свойство применилось (для чего нужны минимум 3 параметра). Разумеется, браузер скорее всего не найдет шрифта с именем «a» и отобразит точки шрифтом по умолчанию — но нам всё равно, текст всё равно микроскопический, невидимый и роль его чисто вспомогательная.

    2) Всё верно, за счет огромного word-spacing текст растянулся настолько, чтобы с гарантией не поместиться в одну строку и перенестись на следующую. А значит, ширина содержимого нашей «таблицы» уже гарантированно не меньше доступной ширины…

    3) …ее родительского контейнера, в котором находятся обе колонки. В нашем примере это body.

    Благодаря огромному word-spacing-у «таблица» всегда будет вести себя не так, как когда в ней только короткая строка текста, а так, как когда в ней много текста (и она занимает всю доступную ширину родителя — за вычетом padding-ов и предыдущих float-ов, в нашем случае левой колонки — точно так же, как это делают обычные блоки). Тем самым мы получаем блок, в большинстве случаев не отличающийся поведением от обычного блока — но со своим обособленным блочным контекстом форматирования. В общем, псевдоэлемент просто «распирает» «таблицу» настолько, чтобы она всегда занимала всю доступную ширину. В контейнер вписывается не псевдоэлемент, а именно сама «таблица», псевдоэлемент просто не дает ей сжиматься, оставаясь сам невидимым благодаря микроскопическому шрифту и нулевой высоте строки.

    На PSPS: без relative и z-index в примерах «без всего» и с clearfix-ом левая колонка оказалась бы перекрыта правой — как раз потому, что float-ы проникают в границы блоков в том же контексте форматирования (но сдвигают их содержимое).

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

    Clearfix

    При использовании CSS-свойства float: left или float: right , элементы начнут выводиться не так, как ожидается.

    На примере выше видно, что родительский элемент с белым фоном «не покрывает» свои дочерние элементы. Чтобы страница выводилась как ожидалось, для родительского элемента надо добавить класс .clearfix .

    Некоторые верстальщики вместо использования «clearfix» указывают CSS-свойство overflow: hidden , что является неправильным, т.к. в этом случае, объекты, выходящие за пределы контейнера, становятся невидимыми. Например, стрелочки для слайдера, или стикеры («новинка», «хит») на карточках товаров.

    Топ-пост этого месяца:  Автостратегии в Яндекс.Директ будут работать без набора статистики
    Добавить комментарий