Developed by •
©2010 All Rights Reserved •
Clearing floats: clearfix vs overflow. Недостатки и достоинства обоих подходов.В своей недавней статье arestov подробно описал принципиальные отличия очистки потока при помощи свойства 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. 2. Clearfix Достоинство Единственным достоинством Clearfix, на мой взгляд, является отсутствие недостатков overflow :-) Действительно, у этого подхода нет проблем ни с позиционированием, ни с выделением. При этом, не смотря на свою громоздкость, он делает то, что от него требуется. Недостатки Разное поведение в различных браузерах.Если рассмотреть подробно реализацию clearfix, то можно заметить, что для нормальных браузеров применяется очистка потока (clear:both в .clearfix:after), а для IE выполняется определение нового контекста форматирования посредством установки hasLayout (свойство zoom). Это в некоторых случаях влечет за собой различия в отображении и об этом необходимо помнить. Вот, собственно, все плюсы и минусы этих двух подходов, которые я смог припомнить. Надеюсь, я смог убедить вас в том, что каждое решение хорошо на своем месте и что «серебрянной пули» нет. Если я вдруг упустил что-то из виду, поправьте меня.
Clearing floats: clearfix vs overflow. Недостатки и достоинства обоих подходов.
Комментариев нет:
Отправить комментарий