画像下にテキストを周り込ませないCSS

画像にCSSでfloatで指定した場合、文字が画像の下まで回りこんでいきます。。。marginやpadding指定でやり過ごしてましたが、ブラウザによるレイアウト崩れが気になっていました。

通常の場合↓

海「海の少年」  著 者:小川未明

今年の夏休みに、正雄さんは、母さんや姉さんに連れられて、江の島の別荘へ避暑にまいりました。正雄さんは海が珍しいので、毎日朝から晩まで、海辺へ出ては、美しい貝がらや、小石などを拾い集めて、それをたもとに入れて、重くなったのをかかえて家へ帰ると、姉や妹に見せて、だんだんたくさんにたまるのを見て、東京へのおみやげにしようと喜んでいました。←この部分が気なる

overflow: auto;で、文字を画像下まで回りこませない

floatされた文字にCSSでoverflow: auto;を指定して解決!

overflowを指定した場合↓

海「海の少年」  著 者:小川未明

今年の夏休みに、正雄さんは、母さんや姉さんに連れられて、江の島の別荘へ避暑にまいりました。正雄さんは海が珍しいので、毎日朝から晩まで、海辺へ出ては、美しい貝がらや、小石などを拾い集めて、それをたもとに入れて、重くなったのをかかえて家へ帰ると、姉や妹に見せて、だんだんたくさんにたまるのを見て、東京へのおみやげにしようと喜んでいました。

画像にではなく回りこむ要素に指定すること

文字の<p>部分に<p style=”overflow: auto;”>で指定します。
<div>などボックス要素に指定してもいいですね。