Clearfix and parent height in CSS

Let's leave one div with the class parent, remove the text from it, leaving only the floating image. As you already know, in this case the height of the div will collapse to zero, leaving only the upper and lower borders. The image will go beyond our div from below:

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

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

Let's make the floating image expand our div in height. To do this, we use a clever trick - we'll put a div without text after the image with the class clearfix.

Our image is a floating element and does not expand the parent in height, but the div-clearfix is not floating and affects the height of the parent.

Since the div-clearfix is set to the property clear, it turns out that it will be pushed down with the picture and stand under it, while expanding the parent in height.

The clearfix div itself is empty and not visible on the screen, but it expands the parent in height.

So let's try it:

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