Clearing floats: clearfix vs overflow. Недостатки и достоинства обоих подходов. / Каскадные Таблицы Стилей / private

Каскадные Таблицы Стилей

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 .

Пофикшено в Firefox 4.0.

2. Clearfix

Достоинство

Единственным достоинством Clearfix, на мой взгляд, является отсутствие недостатков overflow :-) Действительно, у этого подхода нет проблем ни с позиционированием, ни с выделением. При этом, не смотря на свою громоздкость, он делает то, что от него требуется.

Недостатки

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

Вот, собственно, все плюсы и минусы этих двух подходов, которые я смог припомнить. Надеюсь, я смог убедить вас в том, что каждое решение хорошо на своем месте и что «серебрянной пули» нет. Если я вдруг упустил что-то из виду, поправьте меня.

+52

6 января 2009, 04:34

119

private_face

blog comments powered by Disqus

комментарии с хабра ( 16 )

- tenshi ,
- 6 января 2009, 05:48
- #
- ↓
- - +1
d-o-b.ru/test/clear/

ответить
- - tenshi ,
  - 6 января 2009, 05:53
  - #
  - ↑
  - ↓
  - - 0
  в мозилле марджины не схлопываются, но это не так страшно…
  
  ответить
- dreamhelg ,
- 6 января 2009, 07:11
- #
- ↓
- - 0
меня вы убедили в том что overflow не стоит использовать для очистки потока, хотя я и до этого так считала

ответить
- iDrum ,
- 6 января 2009, 08:19
- #
- ↓
- - 0
Вопрос от особы совсем чуть-чуть приближенной к ~~императору~~ вёрстке: что такое поток и зачем его очищать?

ответить
- НЛО прилетело и опубликовало эту надпись здесь.
- GruZZ ,
- 6 января 2009, 09:55
- #
- ↓
- - +1
Верстальщики проснулись и зашевелились. Это радует =) Жду еще новых статей.

P.S. Мне в работе достаточно класса .clear, который я закинул в reset.css:
```
.clear:after {
	content:"";
	display:block;
	clear:both;
}
```
и height:1%; для IE
ответить
- homm ,
- 6 января 2009, 10:17
- #
- ↓
- - 0
Жду с нетерпением статью про inline-block. По моему это просто чудо какое-то.
test.kizu.ru/examples/inline-block-solved.html

ответить
- НЛО прилетело и опубликовало эту надпись здесь.
- НЛО прилетело и опубликовало эту надпись здесь.
- pepelsbey ,
- 6 января 2009, 15:46
- #
- ↓
- - +1
Это в некоторых случаях влечет за собой различия в отображении и об этом необходимо помнить.
А если точнее?

ответить
- - private_face ,
  - 7 января 2009, 13:50
  - #
  - ↑
  - ↓
  - - +1
  Например, посмотрите на эту тестовую страницу в IE и не-IE.
  
  ответить
  - - pepelsbey ,
    - 7 января 2009, 15:06
    - #
    - ↑
    - ↓
    - +1
    Я думаю, что необходимо просто помнить, что hasLayout, overflow и dot-clearing — это совсем разные вещи. А то, что они, в частности, одинаково решают проблему с клиарингом родителя — просто удачное совпадение. И не стоит ожидать от них одинакового поведения. По-моему, это очевидно.
    
    ответить
    - private_face ,
      
      7 января 2009, 15:22
      
      #
      
      ↑
      
      ↓
      
      +1
      Мне казалось, что именно это я и написал (новый контекст форматирования в IE против clear в в не-IE браузерах). Возможно, это и очевидно, но не упомянуть об этом, по-моему, было нельзя.
      
      ответить
- koldarev ,
- 7 января 2009, 01:28
- #
- ↓
- - 0
Я бы первое достоинство overflow:hidden в недостатки перенес. Т.о. появится еще одно достоинство у clearfix'a: достаточно назначить родительскому блоку класс (что проще, чем прописывать каждый раз одно и тоже свойство разным селекторам).

ответить
- - homm ,
  - 7 января 2009, 09:35
  - #
  - ↑
  - ↓
  - - –1
  А для overflow:hidden нельзя прописать класс? Или вы исходите из соображений, что раз коду меньша, то нет смысла в классе, а раз нет класса, уже не так удобно? Странные у вас рассуждения.
  
  ответить
  - - koldarev ,
    - 7 января 2009, 11:50
    - #
    - ↑
    - ↓
    - 0
    В своих странных рассуждениях я отталкиваюсь лишь от предложенной методики: либо класс, либо свойство родителя. И считаю использование класса более удобным (будь он с cler'ом или же с overflow), ибо надоедает каждый раз заботиться о hasLayout.
    
    ответить

Каскадные Таблицы Стилей