Wprowadzenie do właściwości float w CSS

Załóżmy, że mamy div z długim tekstem. Wstawmy na początku tego tekstu obrazek:

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

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

Jak widzicie, dół obrazka znajduje się na pierwszej linii tekstu, a reszta idzie w górę. Po prawej stronie obrazka powstaje duża pusta przestrzeń. Sprawmy, aby tekst wypełnił tę pustą przestrzeń. W tym celu ustawimy dla obrazka właściwość float z wartością left:

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

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

A więc teraz obrazek unosi się po lewej stronie, a tekst opływa go odpowiednio po prawej stronie. Przy tym pusta przestrzeń z boku obrazka zniknęła.

Można sprawić, żeby obrazek unosił się nie po lewej stronie, ale po prawej. W tym celu float ustawimy na wartość right:

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

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

Weź długi tekst. Wstaw na początku tekstu jeden obrazek, a w środku - drugi. Spraw, aby pierwszy obrazek unosił się po lewej stronie, a drugi - po prawej.