Этот загадочный clearfix

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

Так вот, появление clearfix обязано одной особенности css, которая начинающим верстальщикам кажется очень нелогичной, — это всплывающие элементы. Предположим, у вас есть некий родительский элемент, а внутри него — дочерний со стилем float. А следом за родительским идет ещё один… Что мы получаем в такой ситуации? Если дочерний элемент достаточно большой, то по правилам элементам со стилем float он выпадает из общего потока. А это значит, что высота родительского элемента равна нулю или, если он содержит еще какой-то текст, обтекающий дочерний элемент, то высоте этого текста. Таким образом всё, что будет следовать за этим родительским элементом будет пытаться «всплыть» относительно дочернего. Звучит путано, но кто пробовал верстать, тот с этим сталкивался.

Самый простой метод очистки такого потока — разместить следом блок со стилем clear: both;

Минус — некоторая громоздкость из-за наличия дополнительного элемента.

Избавиться от этого можно так же используя clearfix. Достаточно присвоить этот класс родителю, как он все сразу поправит :-)

Один из вариантов

  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. clear: both;
  5. visibility: hidden;
  6. line-height: 0;
  7. height: 0;
  8. }
  9.  
  10. .clearfix {
  11. display: inline-block;
  12. }
  13.  
  14. * html .clearfix { zoom: 1; } /* IE6 */
  15. *+html .clearfix { zoom: 1; } /* IE7 */
  16.  
  17. html[xmlns] .clearfix {
  18. display: block;
  19. }
  20.  
  21. * html .clearfix {
  22. height: 1%;
  23. }

И новый «буржуйский» micro-clearfix

  1. /* For modern browsers */
  2. .clearfix:before,
  3. .clearfix:after {
  4. content: " ";
  5. display: table;
  6. }
  7.  
  8. .clearfix:after {
  9. clear: both;
  10. }
  11.  
  12. /* For IE 6/7 (trigger hasLayout) */
  13. .clearfix {
  14. *zoom: 1;
  15. }

Здесь стоит особенно отметить, что в кавычках content: " " должен стоять один пробел. Это исправляет баг в Опере.