Properti clear

Properti clear membatalkan pengapungan (float) suatu elemen oleh elemen lain, yang ditentukan oleh properti float. Dapat menerima nilai-nilai berikut: none (membatalkan aksi dirinya sendiri), both (membatalkan float secara bersamaan dari kanan dan kiri), left (membatalkan float dari kiri), right (membatalkan float dari kanan).

Sintaks

selektor {
	clear: none atau left atau right atau both
}

Contoh

Mari batalkan pengapungan gambar oleh teks dari kiri:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		teks teks teks teks teks teks
		teks teks teks teks teks teks
		teks teks teks teks teks teks
		teks teks teks teks teks teks
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Contoh

Sekarang mari batalkan pengapungan gambar oleh teks dari kanan:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		teks teks teks teks teks teks
		teks teks teks teks teks teks
		teks teks teks teks teks teks
		teks teks teks teks teks teks
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Contoh

Mari batalkan aksi dari properti clear itu sendiri:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		teks teks teks teks teks teks
		teks teks teks teks teks teks
		teks teks teks teks teks teks
		teks teks teks teks teks teks
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Lihat juga

properti bottom,
yang mengatur posisi tepi bawah elemen
properti top,
yang mengatur posisi tepi atas elemen
properti left,
yang mengatur posisi tepi kiri elemen
properti right,
yang mengatur posisi tepi kanan elemen
pseudoelemen ::backdrop,
yang mengatur posisi setelah elemen pertama
properti caption-side,
yang mengatur posisi judul tabel