Úvod do vlastnosti float v CSS

Nech máme div s nejakým dlhým textom. Vložme na začiatok tohto textu obrázok:

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

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

Ako vidíte, spodok obrázka sa umiestňuje na prvom riadku textu a zvyšná časť ide nahor. Napravo od obrázka je veľký prázdny priestor. Urobme tak, aby text vyplnil tento prázdny priestor. Na to nastavme obrázku vlastnosť float s hodnotou left:

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

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

Takže teraz obrázok pláva vľavo a text ho obtáka zodpovedajúco vpravo. Pritom prázdny priestor vedľa obrázka zmizol.

Obrázok môžeme prinútiť plávať nie vľavo, ale vpravo. Na to float nastavíme na hodnotu right:

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

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

Vezmite dlhý text. Vložte na začiatok textu jeden obrázok a do stredu - druhý. Urobte tak, aby prvý obrázok plával vľavo a druhý - vpravo.