Uporaba lastnosti Clearfix lahko samodejno prilagodi nadrejeni element glede na podrejeni element in odpravi težave v kodi HTML prek nekaterih atributov, kot je ' preliv ”, ki nadzoruje dimenzije nadrejenih in podrejenih elementov, ne da bi zahteval dodatne oznake.
Uporaba lastnosti Clearfix
Razumejmo uporabo lastnosti clearfix, da bomo vedeli, kaj naredi z izhodom z dodajanjem lastnosti CSS clearfix v delček kode HTML:
Brez lastnosti Clearfix
Zaženimo delček kode brez izvajanja lastnosti clearfix, da razumemo, kakšne težave lahko razreši clearfix:
Ustvarite razred v HTML, ki vstavi sliko v vsebnik div:
< div razred = 'clearfix' >
< št >< img razred = 'img' src = 'slika.png' vse = 'slika' premer = '250' višina = '180' >
SMS ...
< / div >
Sledi koda CSS za zgornji HTML:
.clearfix {
meja : 3px trdna #2baa12 ;
oblazinjenje : 5px ;
}
.img {
lebdi : levo ;
}
>
To bo ustvarilo izhod na tak način, da se bo podrejeni razred, ki vsebuje sliko, prelil zunaj vsebnika. V takšnih situacijah lahko z lastnostjo počisti popravek preprosto počistite ali odpravite to težavo:
Z lastnostjo Clearfix
Če želite odpraviti težavo, lahko preprosto dodamo preliv atribut z vrednostjo enako avto ki bo prilagodil nadrejeni vsebnik glede na velikost podrejenega elementa:
.clearfix {
meja : 3px trdna #2baa12 ;
oblazinjenje : 5px ;
}
.clearfix {
preliv : avto ;
}
.img {
lebdi : levo ;
}
>
V tem delčku kode je nadrejeni razred vsebnik, slika pa je vstavljena v njegov podrejeni razred:
< div razred = 'clearfix' >< št >< img razred = 'img' src = 'slika.png' vse = 'slika' premer = '250' višina = '180' >
SMS ...
< / div >
Če dodate lastnost clearfix, se bo nadrejeni element (vsebnik) samodejno razširil glede na velikost podrejenega elementa, ki je vstavljena slika:
Tako deluje lastnost Clearfix v HTML.
Zaključek
Lastnost clearfix se uporablja za prilagoditev podrejenih elementov v HTML glede na nadrejene elemente s preprosto lastnostjo clearfix brez potrebe po dodatnih oznakah. Uporaba CSS Clearfix poveča ali zmanjša dimenzije nadrejenih elementov, da jih prilagodi glede na dimenzije podrejenih elementov.