Clearfix en die ouer se hoogte in CSS

Laat ons een div met die klas parent los, verwyder die teks daaruit, en laat net die drywende prentjie oor. Soos jy reeds weet, sal die hoogte van die div in hierdie geval tot nul ineenstort, daar sal net die boonste en onderste grens oorbly. Die prentjie sal dan onderkant uit ons div uitsteek:

<div class="parent">
	<img src="img.png" alt="">
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

Laat ons dit so maak dat die drywende prentjie ons div in hoogte uitbrei. Vir dit word 'n slim metode gebruik - laat ons na die prentjie 'n div sonder teks met die klas clearfix plaas.

Ons prentjie is 'n drywende element en brei nie die ouer se hoogte uit nie, maar die div-clearfix - is nie drywend nie en beïnvloed die ouer se hoogte.

Aangesien die clearfix-div die eienskap clear het, sal dit gebeur dat dit deur die prentjie afgestoot sal word en daaronder sal staan, terwyl dit die ouer se hoogte uitbrei.

Die clearfix-div self is leeg en sigbaar op die skerm, maar brei terselfdertyd die ouer se hoogte uit.

Kom ons probeer dus:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}