Brug af Clearfix-egenskaben kan automatisk justere det overordnede element i henhold til underelementet og løse problemerne i en HTML-kode gennem nogle attributter som ' flyde over ”, der styrer dimensionerne af de overordnede og underordnede elementer uden at kræve yderligere markeringer.
Brug af Clearfix Property
Lad os forstå brugen af en clearfix-egenskab for at vide, hvad den gør ved outputtet ved at tilføje en CSS-clearfix-egenskab i et HTML-kodestykke:
Uden Clearfix Property
Lad os køre et kodestykke uden at udføre clearfix-egenskaben for at forstå den slags problemer, som clearfix er i stand til at løse:
Opret en klasse i HTML, der indsætter et billede i en div-beholder:
< div klasse = 'clearfix' >
< br >< img klasse = 'img' src = 'image.png' alt = 'billede' bredde = '250' højde = '180' >
Tekst...
< / div >
Følgende er CSS-koden for ovenstående HTML:
.clearfix {
grænse : 3 px solid #2baa12 ;
polstring : 5 px ;
}
.img {
flyde : venstre ;
}
>
Dette vil generere output på en sådan måde, at den underordnede klasse, der indeholder billedet, vil flyde over uden for containeren. I situationer som denne kan egenskaben clear fix bruges til nemt at rydde eller løse dette problem:
Med Clearfix Property
For at løse problemet kan vi blot tilføje en flyde over attribut med værdien lig med auto der vil justere den overordnede container i henhold til størrelsen af det underordnede element:
.clearfix {
grænse : 3 px solid #2baa12 ;
polstring : 5 px ;
}
.clearfix {
flyde over : auto ;
}
.img {
flyde : venstre ;
}
>
Her i dette kodestykke er den overordnede klasse containeren, og billedet er indsat i dens underordnede klasse:
< div klasse = 'clearfix' >< br >< img klasse = 'img' src = 'image.png' alt = 'billede' bredde = '250' højde = '180' >
Tekst...
< / div >
Tilføjelse af en clearfix-egenskab vil automatisk udvide det overordnede element (beholderen) i henhold til størrelsen af det underordnede element, som er det indsatte billede:
Sådan fungerer en Clearfix-egenskab i HTML.
Konklusion
En clearfix-egenskab bruges til at justere de underordnede elementer i HTML i henhold til de overordnede elementer med en simpel clearfix-egenskab uden at kræve yderligere markeringer. Brug af CSS Clearfix øger eller mindsker dimensionerne af de overordnede elementer for at justere dem i henhold til dimensionerne af de underordnede elementer.