今更ながらのclearfix

あいまいに逃げてきたHTMLまわりと向き合うシリーズ2回目。clearfix。

floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear:both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。

スタイルシートをめぐる冒険:clearfixの決定版を作る −モダンブラウザ編−
http://norisfactory.com/stylesheetlab/000038.php

HTMLの各要素は、文書上のただの文字列に意味を持たせるために
利用するものであり、見た目のためだけに、空の要素を利用するのは、
「文字列に意味を持たせる」という本来の目的を達成していない。

XHTMLに空の要素を追加しているという点であまり好ましくないので、
clearfixという方法を使いましょうという話。

基本的にはこんな感じらしい。

.clearfix:after {
  content:".";  /* 新しい要素を作る */
  display:block;  /* ブロックレベル要素に */
  clear:both;
  height:0;
  visibility:hidden;
}

.clearfix {
  min-height:1px;
}

* html .clearfix {
  height:1px;
  /*\*//*/
  height:auto;
  overflow:hidden;
  /**/
}

after擬似要素を利用する。

after擬似要素とは？

after擬似要素は、指定した要素の後ろに内容を追加します。
利用する場合には、追加する内容をcontentプロパティを利用して指定します。
IE6,はafter擬似要素をサポートしていません。

clearfixでfloatを解除 | d-spica
http://blog.d-spica.com/entry/070307clearfix.html

スタイルシートをめぐる冒険:clearfixの決定版を作る −モダンブラウザ編−
http://norisfactory.com/stylesheetlab/000038.php

上記記事が大変参考になった。

ひとつ分からなかったのは、

clearfixはclassにしてHTML文書に埋め込むよりも、CSS内で対象となる要素をセレクタにもってきて内容をに当てて使ったほうが便利です。

clearfixはちゃんと考えられていた
http://3ping.org/2007/05/26/1142

とあったけど、なんでだろう？
classにしたほうが便利なような気がするけどなー。。。