Introduction to the CSS float property

Let's say we have a div with some long text. Let's insert an image at the beginning of this text:

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

div {
	width: 400px;
	text-align: justify;
}

As you can see, the bottom of the image is on the first line of text, and the rest goes up. There is a large empty space to the right of the image. Let's make the text fill this empty space. To do this, we set the image's float property to left:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

So now the image floats on the left, and the text flows around it on the right. At the same time, the empty space on the side of the image has disappeared.

You can make the image float not on the left, but on the right. To do this, set float to right:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Take a long text. Insert one picture at the beginning of the text and another one in the middle. Make the first picture float on the left and the second one on the right.