Sifat clear

Sifat clear membatalkan pengapungan satu elemen oleh elemen lain, yang ditetapkan oleh sifat float. Boleh menerima nilai berikut: none (membatalkan tindakan sendiri), both (membatalkan float secara serentak di kanan dan kiri), left (membatalkan float di kiri), right (membatalkan float di kanan).

Sintaks

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

Contoh

Mari batalkan pengapungan imej oleh teks di sebelah 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 imej oleh teks di sebelah 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 tindakan sifat 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

sifat bottom,
yang menetapkan kedudukan tepi bawah elemen
sifat top,
yang menetapkan kedudukan tepi atas elemen
sifat left,
yang menetapkan kedudukan tepi kiri elemen
sifat right,
yang menetapkan kedudukan tepi kanan elemen
pseudoelemen ::backdrop,
yang menetapkan susunan selepas elemen pertama
sifat caption-side,
yang menetapkan kedudukan tajuk jadual