clearfixの始まり

意外とみんな知らないclearfixの始まりについて調べてみた | REFLECTDESIGNによれば、clearfixを最初に考案したのは、オーストラリア人のWebデベロッパー、Tony Aslettさんとのこと。
REFLECTDESIGNさんの記事でも紹介されていますが、念のため元ネタのサイトへのリンクです。

• Contained Floats, enclosing floats with pure CSS known as the clearfix technique | CSS Creator
• Clearing a float container without source markup

CSSは以下のとおり。
※class名を「.Clearfix」に変更し、コードの体裁を整えています。以下、同様です。

.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.Clearfix {
  display: inline-block;
}

/* Hides from IE Mac */
* html .Clearfix {
  height: 1%;
}

.Clearfix {
  display: block;
}
/* End Hack */

jQuery

jQueryではfont-size: 0;が削除されています。

.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.Clearfix {
  display: inline-block;
}

/* hides clearfix from IE-mac \*/
* html .Clearfix {
  height: 1%;
}

.Clearfix {
  display: block;
}
/* end hide from IE-mac */

MooTools

MooToolsではMac IEを除外したものが使われてますね。

.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.Clearfix {
  display: inline-block;
}

* html .Clearfix {
  height: 1%;
}

.Clearfix {
  display: block;
}

そういえばline-height: 0;ってのもclearfixをモダンブラウザに対応させました | STOPN’ LISTENで言及されてるなぁ。

line-height:0;

この指定がないとSafariなど一部のブラウザで要素の下に隙間ができてしまうケースがあるので、
必要な指定なんです。

ヨモツネット型clearfix

「ヨモツネット型」というのも語弊があるかもですが、乱雑モックアップさんのサンプルCSSでも使用されているものです。

.Clearfix {
  /zoom : 1;
}

.Clearfix:after {
  content : "";
  display : block;
  clear : both;
  height: 0;
}

height: 0;は、ヨモツネットさんによれば、

"." が擬似的に追加されることにより、高さを 0 にしたり、表示を消したりとコードが長くなっていましたが、Netscace に対応しないのならこれらをバッサリなくすことができます。

とのことなので、height: 0;はいらなさそうですが、これがないと一部のブラウザーで隙間が空いたりするみたいです。
私もWebアプリのコーディングをしていた時にOperaで下に隙間が空いたことがありました。詳しい条件は覚えていません…（確かOpera 10で、マイナーバージョンは忘れました）

その他のclearfix

.Clearfix:before,
.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  zoom: 1;
}

.Clearfix:before,
.Clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  zoom: 1;
}

サンプルCSS その1

:after擬似要素にピリオドを使用した場合、height: 0;とvisibility: hidden;が必要。
YUIBlogで紹介されているものと似てますが、ちょっと違う。

.Clearfix:before,
.Clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  /zoom: 1;
}

サンプルCSS その2

:after擬似要素に半角スペースを使用した場合、height: 0;はいらない。overflow: hidden;で解決か？

.Clearfix:before,
.Clearfix:after {
  content: "\0020";
  display: block;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  /zoom: 1;
}

サンプルCSS その3

:after擬似要素が空（""）の場合も「サンプルCSS その2」と同様にoverflow: hidden;で解決？

.Clearfix:before,
.Clearfix:after {
  content: "";
  display: block;
  overflow: hidden;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  /zoom: 1;
}

.Clearfix:before,
.Clearfix:after {
  content: " "; /* 半角スペース使用でOperaのバグを回避できる */
  display: table;
}

.Clearfix:after {
  clear: both;
}

.Clearfix {
  *zoom: 1;
}