Clearfix și înălțimea părintelui în CSS

Să lăsăm un div cu clasa parent, să eliminăm textul din el, lăsând doar imaginea flotantă. După cum știți deja, în acest caz înălțimea div-ului se va colapsa la zero, va rămâne doar bordura superioară și inferioară. Imaginea va ieși în afara div-ului nostru de jos:

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

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

Să facem astfel încât imaginea flotantă să extindă div-ul nostru în înălțime. Pentru aceasta se utilizează un truc ingenios - să plasăm după imagine un div fără text cu clasa clearfix.

Imaginea noastră este un element flotant și nu extinde părintele în înălțime, dar div-ul clearfix - nu este flotant și influențează înălțimea părintelui.

Deoarece div-ului clearfix i se atribuie proprietatea clear, se va întâmpla ca acesta să fie împins de imagine în jos și să stea sub ea, extinzând astfel părintele în înălțime.

Div-ul clearfix în sine este gol și nu este vizibil pe ecran, dar în același timp extinde părintele în înălțime.

Deci, să încercăm:

<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;
}