【CSS】floatさせた画像の下にテキストを回り込ませない方法(サンプルコードあり)

floatを使ってテキストと画像を配置することはコーディングでよく使う記述だと思います。

ただ、普通にfloatしただけだとテキストが画像よりも長くなった場合、下に回りこんでしまいます。デザインによっては回り込まないで端を揃えたいこともあります。今回はfloatさせた画像下に文字を回り込ませない方法を紹介します。

画像の下にテキストを回り込ませない方法

floatを使ってテキストを回り込みさせる時は下記のように記述します。

<div class="box">
<img src="test.png">
<p>回り込みさせるテキストです</p>
</div>

.box img {
	float: left;
}

この記述だとテキストが画像よりも長くなると下に回りこんでしまいます。
それを回避したい時は[overflow: hidden;]を追加します。

.box p {
	overflow: hidden;
}

私はこのテクニックを知らなかった頃、画像の下にpaddingを取ってごまかしてた記憶があります。今思うと相当恥ずかしい…（汗）

overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

デザインやインターフェースの好みで、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。

LINK：overflow～スタイルシートリファレンス

これを応用して、定義リスト＜dl＞の＜dt＞にfloatを記述して横並びにした際、＜dd＞に[overflow:hidden]を入れると＜dd＞のテキストが＜dt＞の下に回り込まなくなります。