Hallo sahabat dumenity berjumpa lagi dengan saya, masih dalam artikel Dumetschool pada artikel kali ini saya akan membahas tentang perbedaan antara property CSS overflow dan clear dalam kontek multiple kolom atau biasa disebut pembagian kolom dalam HTML dan CSS. Kenapa saya bilang dalam kontek multiple kolom karena property CSS overflow dan clear selalu dipakai dalam pembagian kolom. Pada materi pembagian kolom ini, orang sering mengalami kesulitan bagaimana cara membagi kolom tampilan website. Apalagi untuk orang awam pasti sangat kesulitan. 

Fungsi property CSS3 overflow dan clear ini bisa di bilang sama yang membedakan dari keduanya ini hanya cara penerapannya saja. Jika overflow disisipkan pada elemen pembungkus atau elemen terluar dari pembagian kolom sedangkan clear digunakan pada bagian target element html yang mengalami perubahan setelah dilakukan pembagian kolom.  Untuk lebih jelasnya saya akan berikan contohnya di bawah ini.

Oke di bawah saya akan membuat element HTML class kotak dimana nantinya akan ada pembagian kolom di dalam kelas box tersebut.

Dari HTML di atas saya mempunyai elemen HTML kelas kotak dan kelas box dimana di dalam kelas kotak terdapat pembagian kolom left dan right yaitu pada kelas kotak1 dan kelas kotak2. karena sifat pembagian kolom menyisakan ruang kosong maka secara tidak langsung elemen bagian kelas box akan naik ke atas lihat contoh pada gambar di bawah. Eleman kelas box saya kasih style berwarna biru, dari situ kelihatan bahwa kelas box naik sampai ke kelas kotak.

Perbedaan Property CSS Overflow dan Clear

Dari contoh gambar di atas kita dapat melihat perbedaan property CSS overflow dan clear, Seperti yang saya bilang bahwa overflow diberikan pada elemen terluar atau  pembungkus, disini elemen pembungkus dari kedua kolom tersebut adalah kelas kotak. Ketika kelas kotak saya kasih style ;

Perbedaan Property CSS Overflow dan Clear

maka kelas box akan turun normal kembali, Sedangkan untuk properti CSS clear di sini saya berikan pada kelas box kenapa, karena kelas box yang bermasalah. ketika kelas box saya  kasih style

Perbedaan Property CSS Overflow dan Clear

maka kelas box juga akan normal kembali.

Perbedaan Property CSS Overflow dan Clear
Jadi dari situ sudah dapat kita lihat bahwa clear dan overflow cuman beda peletakannya. Jika overflow disisipkan pada elemen pembungkus atau elemen terluar dari pembagian kolom sedangkan clear digunakan pada bagian target element html yang mengalami perubahan setelah dilakukan pembagian kolom.

Oke semoga bermanfaat.