Pomocí vlastností CSS float můžete plavat libovolný obrázek vpravo od libovolného textu, jak je vidět na obrázku vpravo od tohoto textu. Chcete-li to provést na své webové stránce, postupujte podle následujících kroků.

V tomto příkladu budeme používat externí soubor CSS. Pomocí externího souboru CSS můžete vytvořit plovoucí obraz na libovolné stránce, která obsahuje odkaz na soubor CSS. Externí soubory CSS také usnadňují změnu nastavení, která budete chtít v budoucnu upravit.

1. Vytvořte soubor CSS. Pokud již máte soubor CSS pro svou webovou stránku, upravte soubor CSS a přidejte následující kód.

2. Do souboru CSS přidejte následující kód.

 .floatRight {float: right; left-left: 20px} 

Tip: Přidání plováku: levý by způsobil, že se obrázek vznáší na levé straně textu.

Pokud chcete mít více než jeden obrázek plovoucí vpravo, přidejte do souboru CSS také následující řádek.

 .floatRightClear {float: right; clear: right; left-left: 20px} 

3. Po vytvoření výše uvedeného kódu uložte soubor CSS a zavolejte jej z každé stránky HTML pomocí kódu podobného příkladu uvedenému níže. V našem příkladu jsme pojmenovali soubor CSS style.css.

4. Nakonec přidejte na libovolný obrázek, který chcete plavat na pravé straně kontejneru.