Clearfix dan Tinggi Parent di CSS

Mari kita tinggalkan satu div dengan kelas parent, hapus teks darinya, hanya menyisakan gambar mengambang. Seperti yang sudah Anda ketahui, dalam kasus ini tinggi div akan mengempis menjadi nol, yang tersisa hanya border atas dan bawah. Gambar akan keluar dari div kita di bagian bawah:

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

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

Mari kita atur agar gambar mengambang memperluas div kita secara vertikal. Untuk ini digunakan trik yang pintar - letakkan div setelah gambar tanpa teks dengan kelas clearfix.

Gambar kita adalah elemen mengambang dan tidak memperluas parent secara vertikal, tetapi div-clearfix - bukan elemen mengambang dan mempengaruhi tinggi parent.

Karena properti clear diberikan kepada div-clearfix, maka hasilnya adalah dia akan didorong oleh gambar ke bawah dan berdiri di bawahnya, sekaligus memperluas parent secara vertikal.

Div-clearfix itu sendiri kosong dan tidak terlihat di layar, tapi pada saat yang sama memperluas parent secara vertikal.

Jadi, mari kita coba:

<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;
}