Cara Menggunakan Property Clear pada CSS

22/05/2017    Maykhel David    2575     Website

Penggunaan property clear sungguh berkaitan erat dengan property float. Seperti yang kita ketahui, pada property float kita memiliki dua acuan utama, yaitu left dan right. Dimana ketika kita melakukan float left maka konten yang berada di bawahnya akan secara otomatis naik ke sebelah kanan dari konten yang kita beri float:left. Pada kesempatan kali ini saya akan memberikan sebuah tips tentang HTML CSS untuk kalian semua. Tips kali ini kita akan membahas lebih jauh tentang property clear pada CSS. Mungkin dari teman-teman masih ada yang bingung tentang kapan harus menggunakan property clear pada css. Kali ini akan kita bahas selengkapnya.

 

Pada kondisi demikian lah property clear sangat dibutuhkan untuk menjaga agar elemen objek float tadi tidak ikut naik keatas. Contohnya seperti ini


 

Diatas ada menu yang saya buat dengan ul li dan setelahnya ada tag <p> dengan teks panjang. Ketika saya berikan float left pada <li> maka secara otomatis akan membuat tag <p> setelahnya menjadi naik ke atas sebelah kanan.

Disinilah peran penting dari property clear tersebut, sekarang ketika kita berikan property clear:both maka teks tersebut akan kembali ke keadaan normal tanpa terpengaruh dengan efek float dan kembali seperti ini.

Hal ini juga berlaku ketika kita ingin membuat layout website menjadi 2 kolom atau bahkan lebih. Ketika kita ingin membuat halaman website 2 kolom, kita memerlukan property float sebagai pembagi antara kolom satu dengan kolom yang lainnya. Dengan menggunakan property float pada kedua belah sisi kolom tersebut, tentu saja akan berdampak pada konten atau elemen HTML yang ada di bawahnya. Untuk cara mengatasinya, kita bisa menggunakan property clear: both untuk menghilangkan efek float kiri dan kanan.

Atau kalian juga bisa menggunakan property overflow seperti yang saya terangkan pada artikel yang berjudul Mengenal Lebih Jauh Property Overflow pada CSS

Baiklah teman-teman demikian artikel tentang cara menggunakan property clear pada css. Semoga kalian paham kapan harus menggunakan property clear pada css, terima kasih

 

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More