Ú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:

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: