Effect of floats on parent in CSS

Now let's say we have a div with a picture inside. We'll give the div a border, but we won't give the picture the float property for now.

Let's see how it looks in the browser:

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

div {
	border: 1px solid red;
}

Now let's set the image's float property to left. In this case, an amazing thing will happen - the parent's height will disappear, its bottom border will start right after the top one, and the image will go beyond its parent from below:

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

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

It turns out that elements that have the float property set do not expand their parent in height.

Let's write the value right for the float property instead of left. The parent's behavior will not change, but the image will start floating on the right:

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

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