Cara Menggunakan Property Clear pada CSS

CSS clear yaitu sebuah CSS property yang di gunakan untuk membersikan element sebelumnya yang telah mengalami float. Sehingga element yang di clear akan terspisah dari element yang mengalami float dan berpindah pada paragraf baru.

Penggunaan CSS clear sangat bekerjasama dengan property float, dimana saat kita menggunakan float left maka konten yang berada di bawahnya akan berpindah ke sebelah kanan konten yang kita beri float left.

Untuk lebih mengenal property clear, berikut saya tuliskan value-nya:

none
Element dapat di float pada kedua sisinya
Contoh: clear : none ;

left
Element harus clear pada sebelah kiri, artinya float : left tidak berlaku lagi.
Contoh: clear : left ;

right
Element harus clear pada sebelah kanan, artinya float : right tidak berlaku lagi.
Contoh: clear : rigth ;

both
Element harus clear pada sebelah kanan dan kiri/keduanya, artinya float : left dan float :right tidak berlaku lagi.
Contoh: clear : both ;

initial
Nilai property clear akan di kembalikan pada nilai (value) bawaan (default).
Contoh: clear : initial ;

inherit
Nilai-nya mengikuti (berdasarkan) element induknya.
Contoh: clear : inherit ;

Contoh Penggunaan

.konten {  clear : both ;  text-align : center ;  }

Pada gambar berikut terlihat gambar dengan property float left dan konten <p> mengikuti atau naik kesebelah kanan gambar yang menggunakan float left.

Untuk mencegah paragraf <p> berada di sebelah kanan dan tetap di bawah gambar, maka paragraf <p> harus di-clear left atau clear both. Sehingga <p> tidak terbawa property float gambar.

Pada gambar berikut, paragraf <p> tetap pada posisinya alasannya yaitu sudah menggunakan CSS clear left.

Selain itu, property clear dapat di gunakan pada elemen yang lain, menyerupai saat kita hendak membuat halaman website/blog menjadi 2 kolom atau bahkan lebih. Hal ini tentu tidak lepas dari penggunaan float, baik value left maupun right.

Untuk menghindari semoga elemen di bawahnya tidak kena dampak float, maka Anda mampu menggunakan property clear.

Property clear sendiri telah mendukung beberapa browser terkenal, semoga lebih terang lihat tabel berikut ini.

CSS
property	Chrome	Safari	Firefox	Opera	IE
{ clear : }	Ya	Ya	Ya	Ya	Ya

Demikian penjelasan singkat yang dapat saya samapaikan dan semoga bermanfaat terutama bagi para desain pemula.

Share :