floatの背景はみ出しの解消法

AとBの要素があり、Aに対して「float:left」をあてると左にA、右にBと並列に並ぶ。このときBに背景色を指定していると、AのバックにもBの背景が表示されしまう。

こうした現象を解消するには、Bに対して「overflow:hidden」を指定すればOK

自分の場合、記事中の写真をに「float:left」を指定していた。
記事の中には副見出しもあり、この副見出しには背景を指定していた。
サイトの幅を可変にしてたため、ブラウザの幅によっては記事中の副見出しが写真に回り込んでしまう場合があり、このときに副見出しの背景が写真の背後にまでかかってしまったた。
いろいろと検索した結果、副見出しに「overflow:hidden」を指定することで、回り込んだ副見出しの開始位置で背景が切れるようになった。

背景画像の飛び出し問題は結構ありがちなので、このCSSひとつで解消できるのはありがたい。