CSSにおけるフロート親要素内のテキスト

height プロパティをdivから取り除き、画像の前に短いテキストを配置してみましょう。

この場合、divの高さはテキストの高さと等しくなりますが、画像は依然としてdivからはみ出します：

<div>
	テキスト
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

テキストを画像の後に配置してみても、結果は変わりません：

<div>
	<img src="img.png" alt="">
	テキスト
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

今度は、画像を左端にフロートさせてみましょう。結果は同様です：

<div>
	<img src="img.png" alt="">
	テキスト
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

下部にもう一つdivを追加すると、画像はそのdivにも重なります：

<div>
	<img src="img.png" alt="">
	テキスト
</div>
<div>
	テキスト
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

しかし、最初のdivに画像の高さを超える十分な量のテキストを追加すると、画像は2番目のdivには重ならなくなります：

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	テキスト
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

この点は非常に重要です。開発中はあるブロックに多くのテキストがあるかもしれませんが、実際のサイト運用時には予定より少ないテキストしか入らない場合があります。その結果、フロート要素が隣接するブロックに重なる問題が表面化する可能性があります。