Cara Menggunakan Property Clear pada CSS

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

 

22 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat