L'ús de la propietat Clearfix pot ajustar automàticament l'element pare segons l'element fill i solucionar els problemes en un codi HTML mitjançant alguns atributs com ' desbordament ” que controla les dimensions dels elements pare i fill sense requerir marques addicionals.
Ús de la propietat Clearfix
Entenem l'ús d'una propietat clearfix per saber què fa a la sortida afegint una propietat clearfix CSS en un fragment de codi HTML:
Sense la propietat Clearfix
Executem un fragment de codi sense executar la propietat clearfix per entendre el tipus de problemes que clearfix és capaç de resoldre:
Creeu una classe en HTML que insereixi una imatge en un contenidor div:
< div classe = 'clearfix' >
< br >< img classe = 'img' src = 'imatge.png' tot = 'imatge' amplada = '250' alçada = '180' >
Text...
< / div >
A continuació es mostra el codi CSS de l'HTML anterior:
.clearfix {
frontera : 3 píxels sòlid #2baa12 ;
farciment : 5 píxels ;
}
.img {
flotar : esquerra ;
}
Això generarà la sortida de tal manera que la classe fill que conté la imatge es desbordarà fora del contenidor. En situacions com aquesta, la propietat clear fix es pot utilitzar per esborrar o solucionar aquest problema fàcilment:
Amb la propietat Clearfix
Per solucionar el problema, només podem afegir un desbordament atribut amb el valor igual a automàtic que ajustarà el contenidor principal segons la mida de l'element secundari:
.clearfix {
frontera : 3 píxels sòlid #2baa12 ;
farciment : 5 píxels ;
}
.clearfix {
desbordament : automàtic ;
}
.img {
flotar : esquerra ;
}
Aquí, en aquest fragment de codi, la classe pare és el contenidor i la imatge s'insereix a la seva classe secundària:
< div classe = 'clearfix' >< br >< img classe = 'img' src = 'imatge.png' tot = 'imatge' amplada = '250' alçada = '180' >
Text...
< / div >
Afegir una propietat clearfix expandirà automàticament l'element pare (contenidor) segons la mida de l'element secundari que és la imatge inserida:
Així és com funciona una propietat Clearfix en HTML.
Conclusió
Una propietat clearfix s'utilitza per ajustar els elements secundaris en HTML segons els elements pare amb una propietat clearfix senzilla sense necessitat de marques addicionals. L'ús de CSS Clearfix augmenta o disminueix les dimensions dels elements pare per ajustar-los segons les dimensions dels elements secundaris.