Text in float parent in CSS

Let's remove the height property for the div and put a small text in front of the image.

In this case, the height of our div will be equal to the height of the text, and the image will still extend beyond the div:

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

div {
	border: 1px solid red;
}
img {
	float: right;
}

Let's put the text after the image - the result will not change:

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

div {
	border: 1px solid red;
}
img {
	float: right;
}

Let's make the image float on the left edge - the result will be similar:

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

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

Let's add another div below - the picture will fit on it too:

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

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

If you add so much text to the first div that it is taller than the image, it will not fit on the second div:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	text
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

This point is very important - during development it may happen that in some block you have quite a lot of text, and then during the actual work of the site in this block there will be less text than planned. It turns out that in this case the problem with overlapping of floating elements on neighboring blocks will appear.