【CSS】float した画像にテキストを回り込ませないようにする

お知らせやブログ記事の新着一覧などで、左側にサムネイル画像、右側にタイトルや抜粋などのテキストで、float を使って並べたときに、何も設定していないと画像の高さが足りなくなった時に、画像の下へテキストが流れ込んでしまいます。

今回は「float した画像にテキストを回り込ませないようにする」方法をメモします。

float した画像にテキストを回り込ませないようにする方法

こんな感じで、画像の縦幅が足りなくなった時でもテキストを画像の下へ回り込ませない方法です。

やり方はいたって簡単。以下の CSS を記述すれば万事 OK。

たったこれだけです。テキスト（この場合 p タグ）に「overflow:hidden」を設定してあげるだけで、テキストは画像に回り込むことはなく、テキストのエリアだけで自動改行してくれます。

意外と使う便利 CSS です。