IE7,8にも対応するclearfix

今更ながらのclearfixネタ。

floatされたブロック要素が親要素の回り込みから外れることにより生じるレイアウトの崩れを防ぐためのいわゆる「clearfix」というテクニックですが、様々なバリエーションが派生してしまった為Internet Explorer 7(IE7)移行には対応出来ていないものも多く見かけます。

先日、Internet Explorer 8(IE8)ベータ版での動作検証を行う機会があったので、その際確認出来たIE7,8にも対応するclearfixをば。

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
/* Exclude IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* Exclude IE-mac End */

display が inline-block なのがミソですね。