Membatalkan Pengapungan dengan Sifat clear dalam CSS

Untuk menyelesaikan masalah seperti ini, terdapat sifat khas clear yang membatalkan pengapungan. Nilai left membatalkan pengapungan di sebelah kiri, nilai right - di sebelah kanan, dan nilai both - dari kedua-dua belah pihak. Nilai ini yang paling kerap digunakan.

Jadi, sifat clear membatalkan pengapungan. Dalam kes kami, ini akan membolehkan kami melakukan supaya imej terapung dari div pertama tidak menindih div kedua.

Sementara itu clear harus diberikan kepada elemen yang tidak sepatutnya ditindih oleh elemen terapung, iaitu dalam kes kami, ia patut diberikan kepada div kedua.

Mari lakukan ini - berikan kepada div kedua selain kelas parent juga kelas clearfix dan untuk kelas baru ini tetapkan sifat clear dengan nilai both - tindihan imej akan hilang:

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

Nama clearfix adalah diterima umum, oleh itu gunakanlah ia pada masa hadapan.