2005年12月31日(土) コメント:1 トラックバック:3
「CSSのclearプロパティは『floatの解除』である」と説明されることがあります。 これはほとんどの場合において正しいのですが、正確には、clearは上マージンの自動調整です。 (追記:CSS2.1では、上マージンの自動調整ではなく、上マージンが不足する場合に不足分を埋める「クリアランス」を設ける、という説明になります。)
仕様書(邦訳)にはclearについて、つぎのように書かれています。
非浮動ブロックボックスに適用される場合は,値は次の意味をもつ。
- left
- 生成されるボックスの上マージンを増加し,上境界辺が,ソース文書のそれより以前の要素から生じたあらゆる左浮動ボックスの下外辺よりも下になるようにする。
- clearは「floatの解除」ではない
-
ふたつのimg要素が、左フロート、右フロートの順で存在し、ふたつ目のimgで
clear:left
した場合。<p> <img src="xxx.jpg" alt="左フロート" style="float:left"> <img src="xxx.jpg" alt="右フロート" style="clear:left; float:right"> フロートに後続するテキスト </p>
フロートに後続するテキストはどこに流し込まれるでしょうか。 左フロートの右側か、それとも、左フロートの下で右フロートの左側か。
clearが「floatの解除」として働くなら「左フロートの下で右フロートの左側」になりそうです。 しかし実際は「左フロートの右側」です(IEはそうなりませんが)。
フロートは通常の流れから取り除かれています。つまり、ふたつのimgは両方とも通常の流れにないために、テキストはp要素内の最上部に流し込まれます。
clear:left
されたimgは(上マージンが増加して)左フロートよりも下に配置されますが、どちらのフロートも通常の流れに属さないことに変わりありません。 「floatが解除」されるなら、フロートは通常の流れに戻るべきです(floatの解除というべきはfloat:none
でしょう)。 というわけで、clearを「floatの解除」と表現しては正確さを欠くと思います。 - clearとともにmargin-topは指定しないほうがいい
-
clearは上マージンを増加させるプロパティなので、margin-topの値を「上書き」します。 詳しくはCSSバグリストのclearを指定した要素ではフロートに対して上マージンを設置する(WinIE 5.x/6.0)/(Opera 6.0/7.x)を参照。
floatとclearをわかっていれば、2カラムも、幅可変3カラムも、サイドバーだけ幅固定で本文領域幅可変3カラムも、同一のHTMLでCSSを変更するだけで実現可能です。
コメント(1件)
このコメントは管理者の承認待ちです