第47回 floatで崩れた?コレでなおせ!テーブルレイアウトを卒業しよう

floatでレイアウトが崩れたときの対処

前回の続きを書くつもりでしたが、

「あんまりニーズなくない!?」

と思ってしまったので、もーちょいと基本にもどって、アリガチなトラブルへの対処方法をまとめておきます。

floatをキワめましょう。

CSS講座でもややこしい部分ですね。一度受けていただいた方も是非もう一度整理しておきましょう。

まず、floatのおさらいです。

floatとは

floatプロパティは、対象の要素を左または右に寄せることができます。そして、floatが設定された要素の後続の要素は、その反対側に回り込みます。これをつかって、段組レイアウトをすることが多いですね。まずこれが超基本です。

で、非っ常に重要なのが、次の特徴。

要素がブロックレベルの子供をもつ場合は,高さは,最上部ブロックレベルの子ボックスの境界上辺から,最下部ブロックレベルの子ボックスの境界下辺までと する。考慮するのは通常のフローにおける子供に限る。すなわち,浮動ボックス及び絶対位置決めボックスは無視され,相対位置決めされたボックスは,位置指定がないものとして考慮される。

なんてややこしい日本語。でも仕様を訳すとこうなんですね。

とても平たく言い換えると、

floatした要素は、親ボックスのheightの算出対象にならない。

ということです。

イメージは、親要素が「家」で子要素が「柱」です。で、float=柱を引っこ抜く、と考えてみて下さい。

もし柱を抜かれると、家はつぶれてしまいます。全部の柱が抜かれれば、ぺしゃんこになります。

親要素の高さが減ったり、ゼロになったりすれば、その後から続いてくる要素もレイアウトがおかしくなるので、何とかする必要があります。

clearとは

clearプロパティは、float(回り込み)を解除することができます。clearプロパティを使えば、floatによって高さが減った、またはゼロになった要素を元に戻すことができます。つまり、レイアウトが元に戻ります。

しかし、clearプロパティも万能ではありません。高さを戻せない場合があります。

戻せるパターン

clearを指定できる要素がある

戻せないパターン

clearを指定できる要素がない

戻せないパターンは、floatしている要素と同じ階層にclearが指定できる要素がありません。

などさまざまなバッドノウハウがありますが、やめましょう。HTMLソースに無駄が増えたり、方法によっては微妙にくずれたりなど、いいことがありません。後半で対策をご紹介します。

段落ちするときはちゃんと計算して対処

divのブロックを左右に並べた2段組を作っていて、右のブロックが崩れて下に落ちた!なんてことがあります。所謂段落ちです。

この原因は単純です。親のブロックの幅に、左右にわけたブロックの合計幅が収まらないと、段落ちします。

幅が足りずに段落ちする

きちんと合計幅を計算して、左+右の合計が、親ブロックを超えないようにします。このとき、padding,border,marginなどの値もしっかり計算に含めましょう。

このとき、IE6のダブルマージンバグなどにハマらないように気をつけましょう。

参考:IE6でfloatしたボックスのmarginの値が2倍になるバグの対処方法

clearが指定できない場合はoverflowで対処

clearプロパティのところで出てきた問題の対処です。clearが設定できればこの対処は不要ですが、HTMLの構造次第ではclearができない場合があります。定番の手法でclearfixというのがありますが、もっと手っ取り早い方法をご紹介します。

次のような文書構造だったとき、

<div id="parentBox">
<div id="childBox1">
</div>
<div id="childBox2">
</div>
</div>
#parentBox {
width: 600px;
overflow: hidden; /* heightを戻す */
}
#childBox1 {
width: 200px;
float: left;
}
#childBox2 {
width: 400px;
float: right;
}

実はoverflow: hiddenだけで高さは戻ります。この方法では、Mac版IEやNetcapeで崩れるようですが、ユーザーは皆無に等しいということで無視できれば、便利な方法です。

CSS2.1の仕様で、overflow: visibleの要素以外は、height: autoの場合、高さは中身の要素の高さによるとあります。ややこしいですが、つまり、overflowがvisible以外であれば、中身の高さで計算されるよ、ということです。これはfloatされていても同様なので、overflowをhiddenとすることで、結果floatした子要素も高さに 含んでくれる=レイアウトがくずれないわけです。

いかがでしょうか。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSS3のアニメ設定方法【Transitionsモジュール】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読