Einführung in die CSS-Eigenschaft float

Nehmen wir an, wir haben ein Div mit einem langen Text. Fügen wir am Anfang dieses Textes ein Bild ein:

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

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

Wie Sie sehen können, befindet sich der untere Teil des Bildes in der ersten Textzeile, und der restliche Teil geht nach oben. Rechts vom Bild entsteht ein großer leerer Raum. Lassen Sie uns dies so gestalten, dass der Text diesen leeren Raum füllt. Dafür setzen wir die Eigenschaft float auf den Wert left:

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

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

Jetzt schwimmt das Bild also links, und der Text fließt entsprechend rechts daran vorbei. Dabei verschwand der leere Raum neben dem Bild.

Man kann das Bild nicht links, sondern rechts schwimmen lassen. Dafür setzen wir float auf den Wert right:

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

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

Nehmen Sie einen langen Text. Fügen Sie am Anfang des Textes ein Bild ein und in der Mitte - ein anderes. Sorgen Sie dafür, dass das erste Bild links schwimmt und das zweite - rechts.