CSSにおけるクリアフィックスと親要素の高さ

クラスparentを持つ1つのdivを残し、その中のテキストを削除して、浮動する画像だけを残しましょう。ご存知の通り、この場合 divの高さはゼロに崩壊し、上と下の境界線だけが残ります。画像はdivの下側にはみ出してしまいます:

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

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

浮動する画像がdivの高さを拡張するようにしてみましょう。これには巧妙な方法が使われます - 画像の後に、クラスclearfixを持つテキストのないdivを配置します。

画像は浮動要素であり、親の高さを拡張しませんが、 divクリアフィックスは浮動せず、親の高さに影響を与えます。

divクリアフィックスにはプロパティclearが設定されているため、画像によって押し下げられ、その下に位置しつつ、それによって親の高さを拡張することになります。

divクリアフィックス自体は空で画面には表示されませんが、同時に親の高さを拡張します。

それでは、試してみましょう:

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

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

.clearfix {
	clear: both;
}