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

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

Contoh

Mari batalkan pengapungan gambar oleh teks dari kiri:

html<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>

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

Результат:

Contoh

Sekarang mari batalkan pengapungan gambar oleh teks dari kanan:

html<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>

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

Результат:

Contoh

Mari batalkan aksi dari properti clear itu sendiri:

html<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>

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

Результат:

Lihat juga