[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
Post on:2011年4月26日
sponsors
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 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にアップデートされたようなので、以前の版も掲載しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* 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年
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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年
|
1 2 3 4 5 6 7 8 9 |
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */ |
sponsors
