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

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

Contoh

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