Pelajari cara menggunakan properti `clear` untuk mengontrol pengaruh elemen yang mengapung (float) terhadap elemen berikutnya.

CSS Clear

Properti clear digunakan untuk mengontrol bagaimana elemen berikutnya berperilaku setelah elemen yang mengapung (float). Dengan clear, kita bisa memastikan elemen berikutnya tidak mengalir di samping elemen yang mengapung, tetapi langsung berada di bawahnya.

Nilai dari `clear`

left: Elemen tidak boleh mengalir di sebelah elemen yang mengapung ke kiri.
right: Elemen tidak boleh mengalir di sebelah elemen yang mengapung ke kanan.
both: Elemen tidak boleh mengalir di sebelah elemen yang mengapung baik ke kiri maupun ke kanan.
none (default): Elemen dapat mengalir di sekitar elemen yang mengapung.

Contoh: clear: left

<style>
  .float-left {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    float: left;
    margin-right: 20px;
  }
  .clear-left {
    clear: left;
    background-color: lightcoral;
    height: 50px;
  }
</style>
 
<div class="float-left">
  Ini adalah elemen yang mengapung ke kiri.
</div>
<div class="clear-left">
  Elemen ini akan muncul setelah elemen mengapung ke kiri.
</div>

Contoh: clear: right

<style>
  .float-right {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    float: right;
    margin-left: 20px;
  }
  .clear-right {
    clear: right;
    background-color: lightyellow;
    height: 50px;
  }
</style>
 
<div class="float-right">
  Ini adalah elemen yang mengapung ke kanan.
</div>
<div class="clear-right">
  Elemen ini akan muncul setelah elemen mengapung ke kanan.
</div>

Contoh: clear: both

<style>
  .float-left {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    float: left;
    margin-right: 20px;
  }
  .float-right {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    float: right;
    margin-left: 20px;
  }
  .clear-both {
    clear: both;
    background-color: lightcoral;
    height: 50px;
  }
</style>
 
<div class="float-left">
  Ini adalah elemen yang mengapung ke kiri.
</div>
<div class="float-right">
  Ini adalah elemen yang mengapung ke kanan.
</div>
<div class="clear-both">
  Elemen ini akan muncul setelah kedua elemen yang mengapung.
</div>

Contoh: clear: none

<style>
  .float-left {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    float: left;
    margin-right: 20px;
  }
  .clear-none {
    clear: none;
    background-color: lightyellow;
    height: 50px;
  }
</style>
 
<div class="float-left">
  Ini adalah elemen yang mengapung ke kiri.
</div>
<div class="clear-none">
  Elemen ini dapat mengalir di sebelah elemen yang mengapung.
</div>

Properti clear sangat berguna ketika kita bekerja dengan elemen yang mengapung, agar kita bisa memastikan elemen berikutnya tidak mengalir di sampingnya, melainkan muncul di bawahnya.

CSS Clear

CSS Clear

Nilai dari clear

Contoh: clear: left

Contoh: clear: right

Contoh: clear: both

Contoh: clear: none

On this page

Nilai dari `clear`