てんぽ: clearは「floatの解除」ではない

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

clearは「floatの解除」ではない

2005年12月31日(土)

「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を変更するだけで実現可能です。

#62
カテゴリ:HTML・CSS
タグ[ CSS ]

(-1件)

-:承認待ちコメント

このコメントは管理者の承認待ちです

  • 2013年02月20日(水)13:47:58
コメントの投稿

トラックバック(-3件)

http://mb.blog7.fc2.com/tb.php/62-551cfb2b

floatとclearの関係

昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解...

  • 2006年03月27日(月)16:57:24
  • from ddy-w::blog
フロート解除と上マージンは一緒に指定しない!

フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 ---------------------------------- p?{   clear: both;   margin-top: 10px; } ---------------------------------- ↑この様な指定 フロート...

  • 2009年12月24日(木)11:06:18
  • from Work Note
-

管理人の承認後に表示されます

  • 2014年08月28日(木)12:06:09
  • from

<<floatは「回り込み」ではない | 2005年に観たアニメリスト>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。