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

サイト構築 -CSS

Post on:2011年4月26日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

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

A new micro clearfix hack
デモページ

[ad#ad-2]

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

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

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

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

デモページ：IE6で表示

[ad#ad-2]

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

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;
}

/* 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;
}

/* 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;

}

参考：今までのclearfix

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 */

.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 */