clearfix

通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。

コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。

IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。

ソコでかなり便利に使えるテクニックが、clearfix。
使い方は、clearしたい親要素に下記のように記述。

div:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

IE7はコレに対応していないので、IE7用に、

div {
	display: inline-block;
}

と指定するか、IE独自拡張のzoomを使っても回避できます。

div {
	zoom: 100%;
}

:after擬似要素を利用してclearします。
コレ考えた人頭いいなーと思います。

とてもボクじゃ考え付かない...

そういえばclearfixとは直接関係が無いですが、height:1%を使いIE対策としてはみ出さないようにしたり、peek-a-booバグ対策でheightを指定している場合、IE7だとその辺修正されているので、場合によってはIE7だけすんごい事になっているかも知れません。

heightの使い方には留意した方が良さそうです。

---- こっから続き

07/04/01追記：
clearfixがハックなのかどうなのか？
っていうトークをしてて、

ボクは「仕様通りの事をしてても、特定のブラウザを意図した表示にさせる方法」みたいなのをハックとして読んでて、
相手は「仕様通りの事に関してはハックというのはおかしいんじゃないか？」
と意見がズレてました。

まぁどっちでもいいんすけど、一応clearfixに関してはハックという言葉ははずしておきました。

そうなると子セレクタを利用したってのは、ぜんぜんハックでもなんでもないんですよね。
ボクの場合は、IE6に言う事をきかせる手法という感じなんでそういってますが。

まぁ子セレクタに関してのエントリーは、自分でも別にハックじゃないよなーとか思ったりしながら書いてました。
お近くの人と議論になった際には、「どっちでもええやん」か「確かにそうですよね」辺りでいいかなぁと。

いまさらカテゴリを移動するにも適所が見つからないので、このままでいきます。

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•