Di bawah ini kita akan mempelajari cara membersihkan float dengan hack “clearfix”.
Cara Menghapus Float (Clearfix)
Elemen setelah elemen float akan mengalir di sekitarnya. Gunakan “clearfix” untuk memperbaiki masalah:
<!DOCTYPE html> <html> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix { overflow: auto; } .img2 { float: right; } </style> </head> <body> <h2>Clearfix</h2> <p>Dalam contoh ini, gambar lebih tinggi dari elemen yang memuatnya, dan itu mengambang, sehingga keluar dari garisnya:</p> <div> <img class="img1" src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Pineapple" width="170" height="170"> Ayam geprek mania mantap 10 ribuan. Paket komplit ayam + nasi + krispi + Sayur. Mantap ayamnya, Mantap Pedasnya. </div> <p style="clear:right">Tambahkan kelas clearfix dengan overflow: auto; ke elemen yang mengandung, untuk memperbaiki masalah ini:</p> <div class="clearfix"> <img class="img2" src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Pineapple" width="170" height="170"> Ayam geprek mania mantap 10 ribuan. Paket komplit ayam + nasi + krispi + Sayur. Mantap ayamnya, Mantap Pedasnya. </div> </body> </html>
Clearfix Hack
Jika sebuah elemen lebih tinggi dari elemen yang memuatnya, maka elemen tersebut akan mengalami outside dari elemen yang memuatnya atau keluar garis.
Kemudian kita bisa menambahkan overflow: auto; ke elemen container untuk memperbaiki masalah ini:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<h2>Clearfix</h2>
<p>Dalam contoh ini, gambar lebih tinggi dari elemen yang memuatnya, dan itu mengambang, sehingga keluar dari garisnya:</p>
<div>
<img class="img1" src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Pineapple" width="170" height="170">
Ayam geprek mania mantap 10 ribuan. Paket komplit ayam + nasi + krispi + Sayur. Mantap ayamnya, Mantap Pedasnya.
</div>
<p style="clear:right">Tambahkan kelas clearfix dengan overflow: auto; ke elemen yang mengandung, untuk memperbaiki masalah ini:</p>
<div class="clearfix">
<img class="img2" src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Pineapple" width="170" height="170">
Ayam geprek mania mantap 10 ribuan. Paket komplit ayam + nasi + krispi + Sayur. Mantap ayamnya, Mantap Pedasnya.
</div>
</body>
</html>
Overflow: auto clearfix berfungsi dengan baik selama kita dapat mengontrol margin dan padding (jika tidak, mungkin kita dapat melihat scrollbar). Namun, clearfix hack modern yang baru lebih aman digunakan, dan kode berikut digunakan untuk sebagian besar halaman web:
Contoh
<!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>
<h2>Clearfix Hack Modern</h2>
<p>Dalam contoh ini, gambar lebih tinggi dari elemen yang memuatnya, dan itu mengambang, sehingga keluar dari garisnya:</p>
<div>
<img class="img1" src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Pineapple" width="170" height="170">
Ayam geprek mania mantap 10 ribuan. Paket komplit ayam + nasi + krispi + Sayur. Mantap ayamnya, Mantap Pedasnya.
</div>
<p style="clear:right">Tambahkan kelas clearfix dengan overflow: auto; ke elemen yang mengandung, untuk memperbaiki masalah ini:</p>
<div class="clearfix">
<img class="img2" src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Pineapple" width="170" height="170">
Ayam geprek mania mantap 10 ribuan. Paket komplit ayam + nasi + krispi + Sayur. Mantap ayamnya, Mantap Pedasnya.
</div>
</body>
</html>
