CSSのclearプロパティによる回り込み解除

このような問題を解決するために、回り込みを解除する特別なプロパティclearが存在します。値leftは左側の回り込みを解除し、値rightは右側を、値bothは両側の回り込みを解除します。この値が最も頻繁に使用されます。

したがって、プロパティclearは回り込みを解除します。今回のケースでは、これにより最初のdiv内の浮動画像が 2番目のdivにはみ出さないようにすることができます。

ただし、clearは、浮動要素がはみ出してはならない要素、つまり今回のケースでは 2番目のdivに適用する必要があります。

それではやってみましょう - 2番目のdivに parentクラスに加えてclearfixクラスも与え、この新しいクラスに対してclearプロパティを値bothで設定します - 画像のはみ出しが消えます:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent clearfix">
	text
</div>

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

.clearfix {
	clear: both;
}

名前clearfixは一般的に受け入れられているため、今後はこれを使用してください。