Clearing floats: clearfix vs overflow. Недостатки и достоинства обоих подходов.
В своей недавней статье
arestov
подробно описал
принципиальные отличия очистки потока при помощи свойства
В свою очередь, я бы хотел остановиться подробнее на достоинствах и недостатках этих двух решений. Лично я в своей работе применяю и тот, и другой способ. Причиной тому простой факт: каждый из них имеет свои сильные и слабые стороны, которые приходится учитывать при верстке. Ибо на практике,
Для начала оговорюсь: под Clearfix я буду понимать не конструкции вида
Единственным достоинством Clearfix, на мой взгляд, является отсутствие недостатков
Вот, собственно, все плюсы и минусы этих двух подходов, которые я смог припомнить. Надеюсь, я смог убедить вас в том, что каждое решение хорошо на своем месте и что «серебрянной пули» нет. Если я вдруг упустил что-то из виду, поправьте меня.
clear
(например,
clearfix
) от создания нового контекста форматирования при помощи свойства
overflow
.
В свою очередь, я бы хотел остановиться подробнее на достоинствах и недостатках этих двух решений. Лично я в своей работе применяю и тот, и другой способ. Причиной тому простой факт: каждый из них имеет свои сильные и слабые стороны, которые приходится учитывать при верстке. Ибо на практике,
overflow
не всегда уместен, а clearfix не так бесполезен, как кажется.
Для начала оговорюсь: под Clearfix я буду понимать не конструкции вида
<div style="clear:both"></div>
или
<br clear="all" />
(я категорически против их применения), а следующее решение:
.clearfix { zoom: 1 }
.clearfix:after {
content: ' ';
clear:both;
display: block;
width: 0; height: 0;
overflow: hidden;
font-size: 0;
}
1. Overflow
Достоинства
-
Простота.
Достаточно прописать родительскому блокуoverflow:hidden
(илиauto
) и установитьhasLayout
для IE6 тем способом, который вам больше нравится .
-
Собственный контекст форматирования
Как уже было сказано в посте arestov 'a, overflow не выполняет очистки потока, он создает свой собственный изолированный контекст форматирования, который «оборачивает плавающие блоки». Я считаю это достоинством, так как в большинстве случаев использованиеoverflow
упрощает процесс верстки.
Недостатки
-
Проблемы с позиционированием за границы блока.
В соответствии со спецификацией CSS, свойство overflow предписывает браузеру скрывать все, что выходит за границы блока. В нашем случае, все, что вы выносите абсолютным позиционированием или отрицательными маргинами за пределы блока, для которого выполняется clearing — все будет скрыто.
Классический пример: выпадающее горизонтальное меню наUL-LI
.LI
сложены в ряд при помощиfloat:left
, у внешнего UL выполняется clearing. При использованииoverflow
, во всех браузерах кроме IE, выпадающее меню обрезается до границ родительскогоUL
.
Другой пример: раскладка страницы, использующая float и отрицательные margin'ы.Overflow
также неприменим в данном случае.
-
Проблема с выделением текста.
У браузеров на движке Gecko (Firefox и ему подобные) есть неприятная особенность: текст в блоках, для которых заданoverflow:hidden
(либоauto
) не выделяется дальше границ этого блока. Это сложно объяснить, поэтому лучше откройте мою тестовую страницу в firefox и попробуйте выделить текст от середины первого параграфа до конца страницы.
Должен сказать, что с точки зрения пользователя это весьма раздражающая особенность. Неприятно, когда ты хочешь выделить визуально сплошной текст, а получается — только один абзац. И сколько не дергай мышку, выделение ни на символ дальше не сдвинется. А все потому, что кто-то выполнил clearing для параграфа при помощиoverflow
.
Пофикшено в Firefox 4.0.
2. Clearfix
Достоинство
Единственным достоинством Clearfix, на мой взгляд, является отсутствие недостатков
overflow
:-) Действительно, у этого подхода нет проблем ни с позиционированием, ни с выделением. При этом, не смотря на свою громоздкость, он делает то, что от него требуется.
Недостатки
-
Разное поведение в различных браузерах.
Если рассмотреть подробно реализацию clearfix, то можно заметить, что для нормальных браузеров применяется очистка потока (clear:both
в.clearfix:after
), а для IE выполняется определение нового контекста форматирования посредством установкиhasLayout
(свойствоzoom
). Это в некоторых случаях влечет за собой различия в отображении и об этом необходимо помнить.
Вот, собственно, все плюсы и минусы этих двух подходов, которые я смог припомнить. Надеюсь, я смог убедить вас в том, что каждое решение хорошо на своем месте и что «серебрянной пули» нет. Если я вдруг упустил что-то из виду, поправьте меня.
комментарии с хабра ( 16 )
ответить
ответить
ответить
императорувёрстке: что такое поток и зачем его очищать?ответить
P.S. Мне в работе достаточно класса .clear, который я закинул в reset.css:
и height:1%; для IE
ответить
test.kizu.ru/examples/inline-block-solved.html
ответить
ответить
ответить
ответить
ответить
ответить
ответить
ответить