Úvod do vlastnosti float v CSS

Mějme div s nějakým dlouhým textem. Vložme na začátek tohoto textu obrázek:

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

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

Jak vidíte, spodní část obrázku se umisťuje na prvním řádku textu a zbytek jde nahoru. Napravo od obrázku je velký prázdný prostor. Udělejme to tak, aby text vyplnil tento prázdný prostor. K tomu nastavme obrázku vlastnost float s hodnotou left:

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

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

Nyní tedy obrázek plave vlevo a text ho obtéká zprava. Přitom prázdný prostor vedle obrázku zmizel.

Obrázek lze přimět plavat ne vlevo, ale vpravo. K tomu nastavte float na hodnotu right:

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

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

Vezměte dlouhý text. Vložte na začátek textu jeden obrázek a doprostřed - druhý. Zařiďte, aby první obrázek plaval vlevo a druhý - vpravo.