Pada kesempatan kali ini kita akan membahas salah satu pengaturan tata letak pada CSS yaitu properti clear dan clearfix . Apa itu properti clear dan clearfix pada CSS dan bagaimana penggunaannya? Simaklah penjelasan berikut ini.
Properti Clear
Properti clear pada CSS berfungsi untuk menentukan apakah sebuah elemen boleh mengapung atau tidak pada sisi yang diatur oleh clear.
Properti clear pada CSS dapat memiliki salah satu dari nilai berikut ini:
- none – Memungkinkan elemen mengambang di kedua sisi (default)
- left – Elemen tidak diperbolehkan mengambang di sisi kiri
- right- Elemen tidak diperbolehkan mengambang di sisi kanan
- both – Elemen tidak diperbolehkan mengambang di sisi kiri atau kanan
- inherit – Elemen mewarisi nilai clear dari induknya
Pengunaan properti clear yang paling umum adalah setelah menggunakan properti float pada sebuah elemen biasanya elemen selanjutnya akan menggunakan properti clear.
Saat membersihkan sebuah float yang harus dilakukan adalah mencocokkan clear dengan float. Jika elemen mengapung pada sisi kiri, maka gunakan clear:left. Elemen float akan terus mengapung, namun setelah elemen menggunakan clear maka elemen tersebut akan muncul di sisi bawah pada halaman web.
Contoh berikut menunjukan penggunaan clear :left dan float: left. Berarti elemen tidak boleh mengapung di sisi kiri (div):
<!DOCTYPE html> <html> <head> <style> .div1 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div2 { border: 1px solid red; } .div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div4 { border: 1px solid red; clear: left; } </style> </head> <body> <h2>Tanpa clear</h2> <div class="div1">div1</div> <div class="div2">div2 - Perhatikan bahwa div2 letaknya setelah div1 dalam source kode HTML. Namun, karena div1 mengapung pada sisi kiri, teks di div2 menempati sisi sekitar div1.</div> <br><br> <h2>Dengan clear</h2> <div class="div3">div3</div> <div class="div4">div4 - Lihatlah, clear: left; memindahkan div4 pada sisi bawah div3 yang mengambang. Nilai "left pada clear berarti menghapus elemen float pada sisi kiri. Anda juga dapat menggunakan clear "right" dan "both".</div> </body> </html>
Clearfix Hack
Jika sebuah elemen memiliki tingi lebih dari elemen penampungnya dan elemen tersebut diatur mengapung (float) maka elemen itu akan meluap (overflow) di luar penampungnya:
Untuk memeperbaiki masalah tersebut menambahkan overflow: auto; dapat menjadi solusi.
Berikut ini adalah contohnya:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>Dalam contoh ini, tinggi gambar melebih tinggi elemen yang memuatnya, dan diatur mengapung (float), sehingga meluap (overflow) keluar dari penampungnya:</p>
<div>
<img class="img1" src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">Tambahkan kelas clearfix dan overflow: auto; ke dalam elemen penampung untuk memperbaiki masalah ini:</p>
<div class="clearfix">
<img class="img2" src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>
Overflow: auto dan clearfix berfungsi dengan baik selama margin dan padding dapat diatur dengan baik (jika tidak, mungkin akan muncul scrollbar). Namun, clearfix hack yang modern dan baru lebih aman digunakan, berikut code yang lebih moderen dan digunakan untuk sebagian besar halaman web:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>Dalam contoh ini, gambar lebih tinggi dari elemen yang memuatnya, dan diatur mengapung, sehingga meluap keluar dari penampungnya:</p>
<div>
<h2>Tanpa Clearfix</h2>
<img class="img1" src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">Tambahkan clearfix hack ke elemen penampung, untuk memperbaiki masalah ini:</p>
<div class="clearfix">
<h2>Dengan Clearfix</h2>
<img class="img2" src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>
