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