Å bruke ClearFix -egenskapen kan automatisk justere overordnet element i henhold til barnelementet og fikse problemene i en HTML -kode gjennom noen attributter som "flyte”Som kontrollerer dimensjonene til foreldre- og barneelementene uten å kreve ytterligere markering.
Bruk av ClearFix -eiendommer
La oss forstå bruken av en ClearFix -egenskap for å vite hva den gjør med utdataene ved å legge til en CSS ClearFix -egenskap i et HTML -kodebit:
Uten ClearFix -eiendom
La oss kjøre et kodebit uten å utføre ClearFix -egenskapen for å forstå hva slags problemer som ClearFix er i stand til å løse:
Lag en klasse i HTML som setter inn et bilde i en DIV -beholder:
Følgende er CSS -koden for ovennevnte HTML:
Dette vil generere utgangen på en slik måte at barneklassen som inneholder bildet, vil strømme ut utenfor beholderen. I situasjoner som dette kan Clear Fix -egenskapen brukes til å tømme eller løse dette problemet enkelt:
Med ClearFix -eiendom
For å løse problemet, kan vi ganske enkelt legge til en flyte attributt med verdien lik bil Det vil justere foreldrebeholderen i henhold til størrelsen på barnelementet:
Her i denne kodebiten er foreldreklassen beholderen og bildet settes inn i barneklassen:
Å legge til en ClearFix -egenskap vil automatisk utvide overordnet element (beholder) i henhold til størrelsen på barnelementet som er det som er satt inn:
Slik fungerer en ClearFix -eiendom i HTML.
Konklusjon
En ClearFix -egenskap brukes til å justere barneelementene i HTML i henhold til foreldreelementene med en enkel ClearFix -eiendom uten å kreve ytterligere markering. Å bruke CSS -clearfix øker eller reduserer dimensjonene til foreldreelementene for å justere dem i henhold til dimensjonene til barnelementene.