floatしたdiv要素からimg要素(画像)がはみ出す

実はうちのサイトのTOPにblogのRSSをはっつける計画が進行中なんですが、
その過程でちょっとつまづいた部分があったのでメモメモ。

画像を見ると分かるんだけど、外側を覆うdiv要素が緑枠で、
その中に赤枠のimg(を囲ったdiv)要素と青枠のテキスト要素があるのね。
画像の左側は普通にimg(div)をfloat:leftした結果で、見た通り枠からはみ出しちゃってる。

これの解決法が、外側の緑枠のdivにoverflow:autoを設定すること。
そうすると画像の右側のようにはみ出さずに表示ができた。

ググってみるとハマってる人がいっぱいいるみたいね。
そのくせやり方がいろいろあるからこんがらがる。
古いブラウザへの対処とかも考えてるとかなーりめんどくさそう。
その点overflow:autoはとっても簡単。

floatは細かい仕様を忘れがちなので、気をつけないとね。

＜2012:12:27追記＞
こんなサイトを見つけてきた

• CSSでレイアウトするなら絶対に覚えておきたい配置のルール

これの7.3を見る限り、overflowはhiddenでもいいかもしれない。
height指定がauto(多分デフォルト) で、overflowがvisible以外の場合は、
フロートした要素の高さを含むようにdivの高さが伸びる…らしい。
ただ、リンク先にも書かれてる通り、box-shadowなんかが見切れる可能性があるとのこと。
clearfixを使う方法も考えた方がいいかも。
気が向いたらもう一度くらいまとめる予定。ｷｶﾞﾑｲﾀﾗ~