[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix

IE6/7にも対応した、新しいclearfixを紹介します。

デモのキャプチャ

A new micro clearfix hack
デモページ

「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、当サイトでもいくつか紹介してきました。
今回紹介するのは、スタイルシートの量を更に減らし(class名も短く)した「micro clearfix」です。

この新しいclearfixの対応ブラウザは、下記の通りです。

  • Firefox 2+
  • Safari 2+
  • Chrome
  • Opera 9.27+
  • IE 6+, IE Mac

IE6 にも対応しているのは嬉しいところです。

デモのキャプチャ

デモページ:IE6で表示

肝心のスタイルシートは、下記のようになります。

CSS -micro clearfix

CSS -micro clearfix

2011/4/26にアップデートされたようなので、以前の版も掲載しておきます。

参考:今までのclearfix

CSS -Jeff Starr's clearfix -2009年

CSS -Thierry Koblentz's clearfix -2010年

top of page

©2017 coliss