clearfix-reloaded и демистификация overflow:hidden.

Перевод статьи:  clearfix Reloaded + overflow:hidden Demystified.
Автор:  Thierry Koblentz.

Самыми популярными технологиями (хаками) отмены обтекания плавающих объектов без использования структурных элементов документа являются clearfix и overflow:hidden.

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

Clearfix

В статье «Everything You Know About Clearfix is Wrong» («Все, что вам известно о clearfix – неверно») я детально остановился на ситуациях, связанных с использованием данного метода в различных браузерах и рекомендовал применять clearfix только к тем элементам, которые не являются смежными с «плавающими» блоками (например, для элемента, реализующего модальное окно), к тому же, мы, как разработчики все еще должны считаться с таким явлением, как объединение полей. Наглядно этот вопрос демонстрируется на этой демо странице.

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

То есть, для достижения требуемого размещения элементов в контейнере кроссбраузерно, первоначальный вариант кода можно улучшить за счет генерации контента для двух псевдоэлементов:before и :after:

.clearfix:before,
.clearfix:after {
content: "."
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

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

overflow

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

10.1 Определение «содержащего блока»

4. Если у элемента установлено свойство position:absolute, то то его содержащий блок представлен ближайшим родительским элементом, свойство position которого принимает значение absolute, relative или fixed

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

В этом можно убедиться, взглянув на этот пример.

Лучшие альтернативы.

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

display: inline-block;
width: <явное значение ширины>;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *