clearfixを使わないでやるには。

2008年11月11日お昼頃

overflow部分を一部加筆しました。

ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。

さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。

なので、一応基本に戻ってみましょうということで。
最近、「CSS Nite ビギナーズ」とかもやってますしね。

あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。

---- こっから続き

何か、久々に書いてる気がして、どうやって書いてたか思い出せない...

えっと、そもそもどんな状況の時かっていうと以下のような時。

こんな時に、clearfixを使ったりすると思います。
毎度用意しているサンプルは、以下より。

• サンプルページを見る

サンプルを見てもらえば大体分かるかと思いますが、clearfixを使わない場合は、float、overflow、min-heigtプロパティ辺りでやるのが主だと思います。

全サンプルで共通しているスタイルは、以下のようになってます。

#main .section {
	margin: 10px 0 20px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
}
 
#main .section p {
	float: left;
	width: 360px;
}
 
#main .section p.image {
	float: left;
	width: 128px;
	margin: 0 10px 0 0;
}
 
#main .section p.image img {
	vertical-align: top;
}

この状態だと、ダメなのでちゃんとしてあげるためにclearfixを使うと以下のようになります。

#main .section:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
 
#main .section {
	zoom: 1;
}

zoom使ってますが、独自拡張とか使うのが嫌な人はwidthプロパティの指定をしてもOKです。

一応ここからが本題の、clearfix以外でやるには。ですが、ボクが多く使うのは、overflowを使った方法。
以下のような感じです。

#main .section {
	overflow: hidden;
}
 
* html #main .section {
	height: 1%;
}

見た感じ、clearfix使うよりすっきり！
あ、これもIE6用のハックが嫌な場合は、widthプロパティの指定でもOKです。
widthの計算が面倒だったり忘れてる場合が多いから出来るだけ入れたくない人なんです...
後、もうちょっとまともな理由としては、横幅が変わってもwidthの指定が無ければ使い回しが楽ってのもあります。

なお、overflowの値は「hidden/auto/scroll」のいずれかでOKです。
あんまり覚えてないんですけど、hiddenが一番安定してた気がします。

とても良さ気に書いてますが1つ注意点として、overflowは印刷の時に、一部のブラウザで1枚に印刷できないときに改ページせずに消えてしまう時があり、全体を囲ってるdivとかで使ってしまうとよろしくないので、サンプルのようにメインエリア内の一部とかで使うのがいいと思います。
（Firefox2までだったと思う...）

overflowで高さが算出されるのは、2.1の仕様にそんな感じのことが書いてあります。
たぶんこの辺↓
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

英語は頭痛くなるので次。
floatでやる場合は以下のようになります。

#main .section {
	float: left;
}

floatしてる親要素もfloatさせることで、floatのルールが適用されて高さが算出されます。
ただ、floatを使ってやるとマージンの相殺がされないので、余白が変わってしまったり、widthプロパティの指定が無いとレイアウトが崩れたり、後続する要素にclearプロパティの指定が無いと一部のブラウザで崩れたりと、他の処理が面倒になってくるので使い勝手としては微妙かもしれません。（昔はこの方法しか知らなかったので良く使ってましたが）

min-heightプロパティを使ってやる場合は以下のような感じです。

#main .section {
	min-height: 128px;
}
 
* html #main .section {
	height: 128px;
}

コレが使える状況は限られていて、テキストが少なくて、今後を見越したときも明らかに長いテキストは入らないだろうって思える時に加え角丸があった場合に使ったりしてます。
なので、当然テキスト量が多かったり極端にフォントサイズを上げると枠からはみ出してしまいます。

ざっとこんな感じです。

各種SBMに追加

• 
• 
• 
• 
• 
• 
•