Dampak Float pada Parent di CSS

Misalkan sekarang kita memiliki div, di dalamnya terdapat gambar. Kita berikan border pada div, dan untuk gambar belum kita berikan properti float.

Mari kita lihat bagaimana tampilannya di browser:

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

div {
	border: 1px solid red;
}

Sekarang mari kita atur properti float untuk gambar dengan nilai left. Dalam kasus ini hal menakjubkan akan terjadi - tinggi parent akan hilang, batas bawahnya akan dimulai tepat setelah batas atas, dan gambar akan keluar dari bawah parent-nya:

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

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

Ternyata, elemen yang diberikan properti float, tidak memperpanjang parent-nya secara vertikal.

Mari kita ganti nilai properti float dari left menjadi right. Perilaku parent tidak akan berubah, tetapi gambar akan mulai mengapung di sebelah kanan:

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

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