Menggunakan sifat Clearfix secara automatik boleh melaraskan elemen induk mengikut elemen anak dan menyelesaikan masalah dalam kod HTML melalui beberapa atribut seperti “ melimpah ” yang mengawal dimensi unsur ibu bapa dan anak tanpa memerlukan penanda tambahan.
Penggunaan Harta Clearfix
Mari kita fahami penggunaan sifat clearfix untuk mengetahui fungsinya pada output dengan menambahkan sifat clearfix CSS dalam coretan kod HTML:
Tanpa Harta Clearfix
Mari jalankan coretan kod tanpa melaksanakan sifat clearfix untuk memahami jenis masalah yang dapat diselesaikan oleh clearfix:
Buat kelas dalam HTML yang memasukkan imej dalam bekas div:
< div kelas = 'pembetulan jelas' >
< br >< img kelas = 'img' src = 'image.png' segala-galanya = 'gambar' lebar = '250' ketinggian = '180' >
Teks...
< / div >
Berikut ialah kod CSS untuk HTML di atas:
.pembetulan jelas {
sempadan : 3px padu #2baa12 ;
padding : 5px ;
}
.img {
terapung : dibiarkan ;
}
>
Ini akan menjana output sedemikian rupa sehingga kelas kanak-kanak yang mengandungi imej akan melimpah di luar bekas. Dalam situasi seperti ini, sifat clear fix boleh digunakan untuk mengosongkan atau membetulkan isu ini dengan mudah:
Dengan Harta Clearfix
Untuk membetulkan isu tersebut, kami hanya boleh menambah satu melimpah atribut dengan nilai yang sama dengan auto yang akan melaraskan bekas induk mengikut saiz elemen anak:
.pembetulan jelas {
sempadan : 3px padu #2baa12 ;
padding : 5px ;
}
.pembetulan jelas {
melimpah : auto ;
}
.img {
terapung : dibiarkan ;
}
>
Di sini dalam coretan kod ini, kelas induk ialah bekas dan imej dimasukkan dalam kelas anaknya:
< div kelas = 'pembetulan jelas' >< br >< img kelas = 'img' src = 'image.png' segala-galanya = 'gambar' lebar = '250' ketinggian = '180' >
Teks...
< / div >
Menambah sifat clearfix secara automatik akan mengembangkan elemen induk (bekas) mengikut saiz elemen anak iaitu imej yang dimasukkan:
Beginilah cara sifat Clearfix dalam HTML berfungsi.
Kesimpulan
Sifat clearfix digunakan untuk melaraskan elemen anak dalam HTML mengikut elemen induk dengan sifat clearfix yang mudah tanpa memerlukan penanda tambahan. Menggunakan CSS Clearfix meningkatkan atau mengurangkan dimensi elemen induk untuk melaraskannya mengikut dimensi elemen anak.