[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

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

CSS -micro clearfix

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

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:block;
    overflow:hidden;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

CSS -Jeff Starr's clearfix -2009年

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

CSS -Thierry Koblentz's clearfix -2010年

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;	
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */