REDLINE MAGAZINE | floatの親ボックスをoverflowで伸ばすREDLINE MAGAZINEトップページへ

すべてのエントリを見る

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さん、コメントありがとうございます。

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.

って書いてありましたね・・・。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。