clearfix hack

ここでは奇妙な事。floatでときどき起こる悪い現象を取り上げる:

img {
  float: right;
}

<div>

ああ... この例では、画像自体の高さが、画像を含む要素より長い。しかも、画像はfloatされている。だから、コンテナの外に画像がはみ出したんだ!

ブー、不正解。これを直す方法があるにはある。だが、少々みっともない。clearfix hackと呼ばれる方法だ。

さあ、新しくこのCSSを追加してみよう:

.clearfix {
  overflow: auto;
}

さて、何が起こったかな:

<div class="clearfix">

かなりいいね!

この設定は、大抵のモダンブラウザで動作する。もしIE6もサポートしたいなら、君は以下を追加したくなるだろう:

.clearfix {
  overflow: auto;
  zoom: 1;
}

ただし、もっと慎重にならなければならい外来ブラウザもある。clearfixingの世界はかなり恐ろしい。とは言え、多くの主要なブラウザでは、この簡単な解決策で上手くいく。