floatの親ボックスをoverflowで伸ばす
CSS - Clearing floatsという記事を拝見して。左記ページでは冒頭で『floatを利用したレイアウトに関する一般的な問題はfloatボックスを含む親ボックスがそのfloatボックスの最後まで高さを伸ばしたがっていないということです。』と述べている。少し日本語訳がおかしいかもしれないが、要するにfloat使用時に一番やっかいなのは親ボックスの背景が伸びない事だと言っているわけだ。
cssレイアウトを始めた頃に混乱に陥りがちなあの現象。
以前ほんの少しだけこのサイトでもclearfixを利用したこの問題の解決方法を書いた記憶があるが、上記ページではoverflowを利用した解決方法が書かれている。ソースはシンプル。
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}
(CSS - Clearing floatsより引用)
親ボックスにoverflow: auto;と幅(width)を指定してやればいいというもの。幅が必要なのはIE(IE7は除く)のため。他ブラウザ(IE7含む)では別に幅の指定がなくても親ボックスはfloatボックスの下まで伸びる。
実は以前からoverflowを使ったこのやり方も知っていたのだが、あまり掘り下げて考えていなかった。ここで幅を指定するのにはIEの独自拡張"hasLayout"が関係しているとの事。
hasLayoutというのは簡単に言うとそのボックスが「レイアウト」を持っているかを調べるもので、返り値がtrueならレイアウトを持っている、falseなら持っていないと判断するものらしい。判断基準のトリガーと呼ばれるものが存在しており、widthもhasLayoutをtrueと識別させるトリガーの1つ。
他にもこんなのがトリガーとなるようだ。
【プロパティ】・・・ 値
【display】・・・ inline-block
【height】・・・ any value
【float】・・・ left or right
【position】・・・ absolute
【width】・・・ any value
【writing-mode】・・・ tb-rl
【zoom】・・・ any value
詳細はこちら。>>hasLayout Property
ここまで来ると、よくあるパターンでIEで表示がどうたらこうたらの時にheight:1%;とかzoomを指定してたりとかいう回避方法の謎もついでに解ける。元凶はhasLayoutだったらしい。
とりあえず最近このサイトに検索経由で上記問題(背景を最後まで伸ばしたい)みたいな検索語句で来られる方も多いのだが、上記方法か、clearfixを使った方法で回避でするということで・・・。
個人的な感想としてはclearfixを使うよりこっちの方がソースもキレイだし、とっつきやすいんじゃないかなといった感じ。
<< CSSでunderlineをカスタム | 見出しを縦書きにして回りこませたい >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/94
コメント (2)
overflow:auto;だとMacのIEで効かないんですよね…。
MacのIEが対応ブラウザでなければclearfixよりoverflow:auto;の方がいいですね。
投稿者: miho | 2007年04月18日 10:51
>mihoさん、コメントありがとうございます。
macIEやっかいですねー。とは言うものの、実は自分が担当しているサイトはmacIEは対象としないと上から言われてるので結構気が楽です(w
上のサイトを見直したら
If Explorer Mac is still important to you, use overflow: hidden. This browser always shows scrollbars when you use overflow: auto; and I'm not sure why.
って書いてありましたね・・・。
投稿者: Red | 2007年04月18日 11:05