Menggunakan properti Clearfix dapat secara otomatis menyesuaikan elemen induk sesuai dengan elemen anak dan memperbaiki masalah dalam kode HTML melalui beberapa atribut seperti “ meluap ” yang mengontrol dimensi elemen induk dan anak tanpa memerlukan markup tambahan.
Penggunaan Properti Clearfix
Mari kita pahami penggunaan properti clearfix untuk mengetahui apa fungsinya pada output dengan menambahkan properti clearfix CSS dalam cuplikan kode HTML:
Tanpa Properti Clearfix
Mari jalankan cuplikan kode tanpa mengeksekusi properti clearfix untuk memahami jenis masalah yang dapat diselesaikan oleh clearfix:
Buat kelas dalam HTML yang menyisipkan gambar dalam wadah div:
< div kelas = 'memperbaiki' >
< br >< img kelas = 'img' src = 'gambar.png' semuanya = 'gambar' lebar = '250' tinggi = '180' >
Teks...
< / div >
Berikut adalah kode CSS untuk HTML di atas:
.clearfix {
berbatasan : 3px padat #2baa12 ;
lapisan : 5px ;
}
.img {
mengambang : kiri ;
}
>
Ini akan menghasilkan keluaran sedemikian rupa sehingga kelas anak yang berisi gambar akan meluap ke luar wadah. Dalam situasi seperti ini, properti clear fix dapat digunakan untuk menghapus atau memperbaiki masalah ini dengan mudah:
Dengan Properti Clearfix
Untuk memperbaiki masalah ini, kita cukup menambahkan sebuah meluap atribut dengan nilai sama dengan mobil yang akan menyesuaikan wadah induk sesuai dengan ukuran elemen anak:
.clearfix {
berbatasan : 3px padat #2baa12 ;
lapisan : 5px ;
}
.clearfix {
meluap : mobil ;
}
.img {
mengambang : kiri ;
}
>
Di sini, di cuplikan kode ini, kelas induk adalah wadahnya dan gambar dimasukkan ke dalam kelas anaknya:
< div kelas = 'memperbaiki' >< br >< img kelas = 'img' src = 'gambar.png' semuanya = 'gambar' lebar = '250' tinggi = '180' >
Teks...
< / div >
Menambahkan properti clearfix akan secara otomatis memperluas elemen induk (wadah) sesuai dengan ukuran elemen anak yang disisipkan gambar:
Beginilah cara kerja properti Clearfix dalam HTML.
Kesimpulan
Properti clearfix digunakan untuk menyesuaikan elemen anak dalam HTML sesuai dengan elemen induk dengan properti clearfix sederhana tanpa memerlukan markup tambahan. Menggunakan CSS Clearfix menambah atau mengurangi dimensi elemen induk untuk menyesuaikannya sesuai dengan dimensi elemen anak.