Att använda Clearfix-egenskapen kan automatiskt justera det överordnade elementet enligt det underordnade elementet och fixa problemen i en HTML-kod genom vissa attribut som ' svämma över ” som styr dimensionerna för de överordnade och underordnade elementen utan att kräva ytterligare markeringar.
Användning av Clearfix Property
Låt oss förstå användningen av en clearfix-egenskap för att veta vad den gör med utdata genom att lägga till en CSS clearfix-egenskap i ett HTML-kodavsnitt:
Utan Clearfix Property
Låt oss köra ett kodavsnitt utan att köra egenskapen clearfix för att förstå vilken typ av problem som clearfix kan lösa:
Skapa en klass i HTML som infogar en bild i en div-behållare:
< div klass = 'clearfix' >
< br >< img klass = 'img' src = 'image.png' allt = 'bild' bredd = '250' höjd = '180' >
Text...
< / div >
Följande är CSS-koden för ovanstående HTML:
.clearfix {
gräns : 3 px fast #2baa12 ;
stoppning : 5 px ;
}
.img {
flyta : vänster ;
}
>
Detta kommer att generera utdata på ett sådant sätt att den underordnade klassen som innehåller bilden kommer att svämma över utanför behållaren. I sådana här situationer kan egenskapen clear fix användas för att enkelt rensa eller åtgärda det här problemet:
Med Clearfix Property
För att åtgärda problemet kan vi helt enkelt lägga till en svämma över attribut med värdet lika med bil som kommer att justera den överordnade behållaren enligt storleken på det underordnade elementet:
.clearfix {
gräns : 3 px fast #2baa12 ;
stoppning : 5 px ;
}
.clearfix {
svämma över : bil ;
}
.img {
flyta : vänster ;
}
>
Här i det här kodavsnittet är den överordnade klassen behållaren och bilden infogas i dess underordnade klass:
< div klass = 'clearfix' >< br >< img klass = 'img' src = 'image.png' allt = 'bild' bredd = '250' höjd = '180' >
Text...
< / div >
Om du lägger till en clearfix-egenskap utökas det överordnade elementet (behållaren) automatiskt enligt storleken på det underordnade elementet som är den infogade bilden:
Så här fungerar en Clearfix-egenskap i HTML.
Slutsats
En clearfix-egenskap används för att justera de underordnade elementen i HTML enligt de överordnade elementen med en enkel clearfix-egenskap utan att kräva ytterligare markeringar. Genom att använda CSS Clearfix ökar eller minskar dimensionerna på de överordnade elementen för att justera dem enligt dimensionerna för de underordnade elementen.