Cara Menggunakan Property Clear pada CSS

CSS clear adalah 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 berhubungan dengan property float, dimana ketika 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 karena sudah menggunakan CSS clear left.

Selain itu, property clear dapat di gunakan pada elemen yang lain, seperti ketika 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 agar elemen di bawahnya tidak kena dampak float, maka Anda bisa menggunakan property clear.

Property clear sendiri telah mendukung beberapa browser terkenal, agar lebih jelas 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.