Met behulp van de Clearfix-eigenschap kan het bovenliggende element automatisch worden aangepast aan het onderliggende element en kunnen de problemen in een HTML-code worden opgelost door middel van enkele kenmerken zoals ' overloop ” dat de afmetingen van de bovenliggende en onderliggende elementen regelt zonder extra markeringen te vereisen.
Gebruik van Clearfix-eigendom
Laten we het gebruik van een clearfix-eigenschap begrijpen om te weten wat het doet met de uitvoer door een CSS-clearfix-eigenschap toe te voegen aan een HTML-codefragment:
Zonder Clearfix-eigenschap
Laten we een codefragment uitvoeren zonder de eigenschap clearfix uit te voeren om inzicht te krijgen in het soort problemen dat clearfix kan oplossen:
Maak een klasse in HTML die een afbeelding in een div-container invoegt:
< div klas = 'helder oplossen' >
< br >< img klas = 'img' src = 'afbeelding.png' alles = 'afbeelding' breedte = '250' hoogte = '180' >
Tekst...
< / div >
Hieronder volgt de CSS-code voor de bovenstaande HTML:
.clearfix {
grens : 3px stevig #2baa12 ;
opvulling : 5px ;
}
.img {
vlot : links ;
}
Hierdoor wordt de uitvoer zodanig gegenereerd dat de onderliggende klasse die de afbeelding bevat, buiten de container zal overlopen. In dergelijke situaties kan de eigenschap clear fix worden gebruikt om dit probleem eenvoudig op te lossen of op te lossen:
Met Clearfix-eigenschap
Om het probleem op te lossen, kunnen we eenvoudig een overloop attribuut met de waarde gelijk aan auto dat zal de bovenliggende container aanpassen aan de grootte van het onderliggende element:
.clearfix {
grens : 3px stevig #2baa12 ;
opvulling : 5px ;
}
.clearfix {
overloop : auto ;
}
.img {
vlot : links ;
}
Hier in dit codefragment is de bovenliggende klasse de container en wordt de afbeelding ingevoegd in de onderliggende klasse:
< div klas = 'helder oplossen' >< br >< img klas = 'img' src = 'afbeelding.png' alles = 'afbeelding' breedte = '250' hoogte = '180' >
Tekst...
< / div >
Door een clearfix-eigenschap toe te voegen, wordt het bovenliggende element (container) automatisch uitgebreid op basis van de grootte van het onderliggende element dat de ingevoegde afbeelding is:
Dit is hoe een Clearfix-eigenschap in HTML werkt.
Conclusie
Een clearfix-eigenschap wordt gebruikt om de onderliggende elementen in HTML aan te passen aan de bovenliggende elementen met een eenvoudige clearfix-eigenschap zonder dat extra markeringen nodig zijn. Door CSS Clearfix te gebruiken, worden de afmetingen van de bovenliggende elementen vergroot of verkleind om ze aan te passen aan de afmetingen van de onderliggende elementen.