Canceling Floating with the Clear Property in CSS

To solve this problem, there is a special property clear, which cancels the float. The value left cancels the float on the left, the value right - on the right, and the value both - on both sides. This is the value used most often.

So, the clear property cancels the float. In our case, this will allow us to make sure that the floating image from the first div does not overlap the second div.

In this case, clear should be given to the element that should not be overlapped by floating elements, that is, in our case, it should be given to the second div.

Let's do this - let's give the second div, in addition to the parent class, also the clearfix class and for this new class, let's set the clear property to both - the image overlap will disappear:

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

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

.clearfix {
	clear: both;
}

The name clearfix is generally accepted, so please use it from now on.