スタイルシートをめぐる冒険

CSSトラブルシューティング / float関連

floatを繰り返すとレイアウトがくずれる

これは、いわゆる段組レイアウトを縦に重ねた場合と考えてもらえばいいだろう。レイアウトくずれが発生するのは段の高さが一律でない時である。
[該当するブラウザ]
すべてのブラウザ

症状

ボックスA

ボックスB

Netscape7.1の場合のスクリーンショット

単純化するために、AとB、高さの異なるボックスを2つ設定した（A＞B）。そして、ボックスAをfloat: leftで左側に配置、ボックスBをfloat: rightで右側に配置、さらに全体をひとつのボックス（クラス名: column）で囲み、それを2回繰り返してみた（→サンプルページ1）。Winows版IEでは問題ないのでOKと思ってしまいそうだが、実はそれ以外のブラウザではちゃんと表示されない。

【スタイルシート】

.column {
	width: 125px;
	margin-bottom: 5px;
}
.box-A {
	width: 60px;
	height: 60px;
	background-color: #000000;
	float: left;
}
.box-B {
	width: 60px;
	height: 30px;
	background-color: #cccccc;
	float: right;
}

【HTML】

<div class="column">

<div class="box-A">&nbsp;</div>

<div class="box-B">&nbsp;</div>

</div>

<div class="column">

<div class="box-A">&nbsp;</div>

<div class="box-B">&nbsp;</div>

</div>

原因

レイアウトがくずれるのは、全体を囲むボックスを繰り返す前に回り込みを解除していないせいである。にもかかわらず、Windows版IEでは正しく表示されてしまうのは、そちらの方がおかしいというべきだろう。

対策

解決法は2つある。ひとつは、「原因」で指摘している回り込みの解除を用いる方法（→サンプル2）。ただ、「HTMLは論理構造を記述し、見栄えはスタイルシートで定義する」という本来のあり方からすると、HTMLの中にレイアウトを制御する以外まったく意味を持たない要素が入り込んでくるのはやや気になる。
もうひとつは、全体を囲むボックスに高さを与える方法（→サンプル3）。ただし、コンテンツがテキスト主体で、高さを特定できない場合はこの方法を使えないのが難点である。

●回り込みを解除する場合
赤字は変更部分（スタイルシートは変更なし※）
【HTML】

<div class="column">

<div class="box-A">&nbsp;</div>

<div class="box-B">&nbsp;</div>

</div>

<div style="clear: both;"></div>

<div class="column">

<div class="box-A">&nbsp;</div>

<div class="box-B">&nbsp;</div>

</div>

※実際には、Netscape対策のため、ボックスA、ボックスBにもmargin-bottomを追加して設定している。具体的にはサンプル2のソースを参照されたし。

●全体を囲むボックスに高さを与える場合
赤字は変更部分（HTMLは変更なし）
【スタイルシート】


.column {
    width: 125px;
    height: 60px;
    margin-bottom: 5px;
}
.box-A {
    width: 60px;
    height: 60px;
    background-color: #000000;
    float: left;
}
.box-B {
    width: 60px;
    height: 30px;
    background-color: #cccccc;
    float: right;
}

(last modified: 09/12/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/4