Clearfix dan Ketinggian Elemen Induk dalam CSS

Mari kita tinggalkan satu div dengan kelas parent, buangkan teks daripadanya, tinggalkan hanya imej yang terapung. Seperti yang anda sudah tahu, dalam kes ini ketinggian div akan runtuh kepada sifar, yang tinggal hanyalah sempadan atas dan bawah. Imej akan keluar dari div kita di bahagian bawah:

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

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

Mari kita buat supaya imej yang terapung mengembangkan ketinggian div kita. Untuk ini digunakan teknik yang bijak - letakkan div selepas imej tanpa teks dengan kelas clearfix.

Imej kita adalah elemen terapung dan tidak mengembangkan ketinggian induk, tetapi div-clearfix - bukannya terapung dan mempengaruhi ketinggian induk.

Oleh kerana sifat clear diberikan kepada div-clearfix, maka ia akan ditolak ke bawah oleh imej dan berada di bawahnya, sambil mengembangkan ketinggian induk.

Div-clearfix itu sendiri kosong dan tidak kelihatan pada skrin, tetapi pada masa yang sama mengembangkan ketinggian induk.

Jadi, mari kita cuba:

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