6. clear の性質

最終更新 2006年3月6日


「回り込みの解除」として有名な clear ですが、その正確な仕様はあまり知られていません。

clear
ブロックレベル要素に適用できます(display:inline である br 要素等で clear するのは誤り)。
clear は、「float を解除するプロパティである」とよく説明されますが、正確には仕様書の9.5.2 浮動体に隣接する流れの制御 ('clear'特性)にあるように、先行するフロート配置のブロックボックスと隣接してはならないかを指定するプロパティです。 これを実現するために、clear されたボックスはその"ボーダー上辺"が、先行するフロートの外下辺よりも下に来るように、上マージンが調整されます。

clear は上マージンを増加させる

clear は、「float を解除する」ために、ボックスの上マージンを増加させて、先行するフロートの外下辺より clear したボックスのボーダー上辺が下にくるようにします。

clear したボックスには margin-top は指定しないこと

<div id="container">

 <div id="boxA">
 A
 </div>

 <div id="boxB">
 B
 </div>

 <div id="boxC">
 C
 </div>

 <div id="boxD">
 D
 </div>

</div>
#container {
 width:600px;
 border:5px solid black;
 background:gray;
}

#boxB {
 width:30%;
 float:left;
}

#boxC {
 width:30%;
 float:left;
}

#boxD {
 width:100%;
 clear:left;
}

ここでボックスD に margin-top を指定するとどうなるでしょう。

#boxD {
 width:100%;
 clear:left;
 margin-top:30px;
}

このようにした場合、margin-top による 30px よりも clear による上マージンのほうが大きい限り、ボックスD の上辺とフロートボックスの下辺は接したままです (clear とはボックスが先行するフロートと重ならないように上マージンを自動的に増加させるプロパティです)。

ところが IE6 では 30px のマージンが設けられます。これはバグです。

Firefoxでの表示 IE6での表示

つまり、clear を指定したボックスに margin-top を指定すると、CSS を正しく解釈するブラウザと IE6 とで表示結果が異なってしまうのです。 clear を指定した要素には上マージンは指定しないようにしましょう。

ボックスD の上に余白をつけるには

ボックスD の上部に余白をつけるには、フロートしたボックス(ボックスB と C )のほうに下マージンを指定します。

#boxB {
 margin-bottom:30px;
}

#boxC {
 margin-bottom:30px;
}

clear したボックス(D)のボーダー上辺は先行するフロート(ボックスB、C)の外下辺(=マージン辺)より下にくるためです。

clear をもつフロートボックス

<div id="container">

 <div id="boxA">
 A
 </div>

 <div id="boxB">
 B
 </div>

 <div id="boxC">
 C
 </div>

 <div id="boxD">
 D
 </div>

</div>
#container {
 width:600px;
}

#boxA {
 width:200px;
 float:left;
}

#boxB {
 width:200px;
 float:left;
}

#boxC {
 width:200px;
 float:left;
 clear:left;
}

#boxD {
 width:200px;
 float:left;
}

幅 200px のボックスA、B、C、D がすべて左フロートしています。 コンテナブロック(親要素)は幅 600px なので、3つのボックスが横に並ぶことができるだけの幅があります。 ただしボックスCで clear をしています。

このとき、Firefox と IE6 で表示に差がでます。

Firefox では A、B が横に並び、その下にC、D が横に並びます。IE6 では A、B、D が横に並び、その下に C が配置します。

Firefoxでの表示 IE6での表示

これは Firefox のほうが正しい表示です。仕様によるとつぎのような規則があります。

  1. フロートの外上辺は,ソース文書内でそれ以前に出現する要素が生成する,ブロックボックスあるいはフロートの外上辺より上にきてはならない。
  2. フロートの上外辺は、'clear:left'の場合はそれより以前のすべての左フロートの、'clear:right'の場合はそれより以前のすべての右フロートの、又は'clear:both'の場合はそれら両方の、下外辺より下に存在しなければならない。

つまり、10番の規則によりボックスC はボックスB より下でなくてはならず、5番の規則によりボックスD はボックスC より上にきてはいけないのです。IE6 の表示はバグです。

IE6 でのこの表示を Firefox と同様にするには #container の width を 600px 未満にして、3つ分のボックスが並ぶ空間を作らないことです。

まとめ

次回