Membatalkan Float dengan Properti clear di CSS

Untuk menyelesaikan masalah seperti itu, ada properti khusus clear yang membatalkan float. Nilai left membatalkan float dari kiri, nilai right - dari kanan, dan nilai both - dari kedua sisi. Nilai ini yang paling sering digunakan.

Jadi, properti clear membatalkan float. Dalam kasus kami, ini akan memungkinkan kami untuk membuat gambar yang mengambang di div pertama tidak tumpang-tindih ke div kedua.

Sedangkan clear harus diberikan kepada elemen yang tidak boleh ditumpangi oleh elemen mengambang, yaitu dalam kasus kami, properti ini harus diberikan kepada div kedua.

Mari kita lakukan ini - berikan kepada div kedua selain kelas parent juga kelas clearfix dan untuk kelas baru ini atur properti clear dengan nilai both - tumpang-tindih gambar 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 umum digunakan, oleh karena itu gunakanlah nama tersebut ke depannya.