Takazudo Clipping*

見出しがfloating blockの裏に侵食する・floating blockに後続する要素の左右margin,padding

今回作りたいものは、こういうものです。

これができるまでの試行錯誤とfloating blockに後続する要素のmargin,paddingの扱いについて覚書。完成版はこちら。

まず、画像ブロック（divでくくりました）をfloat:right, leftしてみる。

見出しが画像の裏に隠れてしまったー。て、それはいいんですが、この、裏に回った分の線消したい。実はこれを解決するのは意外に簡単で、画像ブロック背景にbackground:#fffを指定してあげる。floating blockは、可能な限り前面に表示されるとのことなので、見出しが隠れるのです。（ちなみにこれは、背景が1色のときのみに有効です。また、見出しのデザインも、途中で切れていいようなものにする必要があります。）

おお完成とおもいきや、よく見てみると・・・

画像が左に回り込んだとき、次にくる見出しの左paddingが効いていない。
floatした要素に後続する要素の左右margin,paddingは無視される？CSS2.1の仕様書に何か書いてあるかと思ったけれど、ズバリな箇所が見つけられなかった。でもこんな例がありました。

「浮動する画像は、重なるブロックボックスの境界を不明確にする」！
よくわからないのでFirefox3で実験。以下は、div.imageをfloat:leftし、その後に、いろんなdisplayプロパティをもった要素を並べてみた結果です。各ブロックには、pading,margin,bordrerを指定しています。※これらは、すべてのdisplayプロパティに対応しているブラウザでしか、正確に描画されません。

blockな要素は、いやおうがなく、完全にめり込む。marginもpaddingも、めり込んだ状態で計算されている。tableな要素に関しては、完全にはめり込まず、しかし、marginをとった部分は、めりこんだブロックと相殺されている。padddingは効いている。（そりゃ表がめりこんだら困りますな）その他インライン要素は、全てちゃんと効いている。（display:inlineに上下marginがとられていないのは仕様通り、インライン要素の上下marginは無視）

仕様書のいろんなところに、「テキストは流し込まれる」という表現があったり、上の結果をみると、行ブロック単位でどんどん流しこまれていくように処理されてる気がする。ただtableは例外という感じで。最初の結果を望むのであれば、inlineに左右padding,marginをつけても、2行になったらインデントされたような状態になってしまうので、table,inline-block,inline-tableあたりの要素を中に追加して、paddingで余白を取ってもらう。ついでに、IEはこれらに非対応なので、hasLayoutの不思議な世界ィィに頼む。zoom:1とかしておく。

これで見出しが画像の下に侵食しなくなりました。自由自在。

オマケ(HTML)

フロートややこしいなー

This article is about... css , float , margin , padding

mick 2008/7/08 (12:01)

＞floatした要素に後続する要素の左右margin,paddingは無視される？
後続ブロックはフロートがないかのように通常配置され、ブロック内の行ボック
スがフロート（外辺含む）と重ならないように縮む、と考えます。marginもpaddin
gも正しく効いているので、今回の例で目的の表示を得るには
「フロートボックスの幅＋望みの幅」を左フロート後の見出し要素の左padding
に指定すれば済みます。
h2 {padding-left:185px; }

＞ただtableは例外
フロートの後続ブロックの振る舞いはdisplayによってではなく、それが新たな
ブロック整形文脈を形成するかどうかで異なり、そのためdisplay:tableの要素が
このように配置されています。よってoverflow:hiddenの要素なども配置のされ方
が通常ブロックとは異なりますが、仕様的にもUA依存のようです。

Takazudo 2008/7/08 (12:04)

mickさん、コメントありがとうございます。
なぜかMTがおかしくて反映されていなかったようで、メールだけきていました。上記、Takazudoの方でポストさせていただきました。

Takazudo 2008/7/08 (12:20)

ご指摘通り、displayのみによって決定されるわけではないようですね。自分の中では、ブロックの振る舞いの種類＝displayの指定だと思ってしまっていました。
試してみたところ、h2の中にspanを入れてtableにせずとも、h2をoverflow:hiddenにしただけで、目的の効果が得られました。画像分＋余白をpaddingを指定しなかったのは、画像の幅がさまざまに変わるからだったのですが、これを実現するためには、、いくつか方法がありそうです。
overflow:hiddenは、floatをclearするのにも使えたりして、ちょっとそういう意図で使ってくれって用意したわけじゃないんだけどなーという感じもしますが、もうちょいCSS2.1読み込んでみます。
ご指摘ありがとうございます！