Ved å bruke Clearfix-egenskapen kan du automatisk justere det overordnede elementet i henhold til underelementet og fikse problemene i en HTML-kode gjennom noen attributter som ' flyte ” som kontrollerer dimensjonene til de overordnede og underordnede elementene uten å kreve ytterligere markeringer.
Bruk av Clearfix Property
La oss forstå bruken av en clearfix-egenskap for å vite hva den gjør med utdataene ved å legge til en CSS clearfix-egenskap i en HTML-kodebit:
Uten Clearfix Property
La oss kjøre en kodebit uten å kjøre clearfix-egenskapen for å forstå hva slags problemer clearfix er i stand til å løse:
Lag en klasse i HTML som setter inn et bilde i en div-beholder:
< div klasse = 'klarfiks' >
< br >< img klasse = 'img' src = 'image.png' alt = 'bilde' bredde = '250' høyde = '180' >
Tekst...
< / div >
Følgende er CSS-koden for HTML-koden ovenfor:
.clearfix {
grense : 3 px fast #2baa12 ;
polstring : 5 px ;
}
.img {
flyte : venstre ;
}
>
Dette vil generere utdataene på en slik måte at den underordnede klassen som inneholder bildet vil flyte over utenfor beholderen. I situasjoner som dette kan clear fix-egenskapen brukes til å fjerne eller fikse dette problemet enkelt:
Med Clearfix Property
For å fikse problemet kan vi ganske enkelt legge til en flyte attributt med verdien lik auto som vil justere den overordnede beholderen i henhold til størrelsen på det underordnede elementet:
.clearfix {
grense : 3 px fast #2baa12 ;
polstring : 5 px ;
}
.clearfix {
flyte : auto ;
}
.img {
flyte : venstre ;
}
>
Her i denne kodebiten er den overordnede klassen beholderen og bildet settes inn i den underordnede klassen:
< div klasse = 'klarfiks' >< br >< img klasse = 'img' src = 'image.png' alt = 'bilde' bredde = '250' høyde = '180' >
Tekst...
< / div >
Hvis du legger til en clearfix-egenskap, vil det overordnede elementet (beholderen) automatisk utvides i henhold til størrelsen på underelementet som er bildet som er satt inn:
Slik fungerer en Clearfix-egenskap i HTML.
Konklusjon
En clearfix-egenskap brukes til å justere de underordnede elementene i HTML i henhold til de overordnede elementene med en enkel clearfix-egenskap uten å kreve ytterligere markeringer. Ved å bruke CSS Clearfix øker eller reduserer dimensjonene til de overordnede elementene for å justere dem i henhold til dimensjonene til underelementene.