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

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

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

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

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

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

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

Результат: