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

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

DREAMWEAVER で CSS スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。

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

「あんまりニーズなくない！？」

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

floatをキワめましょう。

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

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

floatとは

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

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

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

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

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

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

ということです。

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

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

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

clearとは

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

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

戻せるパターン

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

戻せないパターン

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

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

コレを戻すために、たとえば、
改行タグを連続で入れる
空のdivを入れる
改行タグを入れてそこに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した子要素も高さに含んでくれる＝レイアウトがくずれないわけです。

いかがでしょうか。

では次回もお楽しみに。（こう）