Използвайки свойствата на CSS float, можете да плавате всяко изображение отдясно на всеки текст, както може да се види с изображението отдясно на този текст. За да направите това на уеб страницата си, следвайте стъпките по-долу.

В този пример ще използваме външен CSS файл. С помощта на външен CSS файл можете да създадете плаващо изображение на всяка страница, която включва връзка към CSS файла. Външните CSS файлове също улесняват промяната на настройките, които може да искате да коригирате в бъдеще.

1. Създайте CSS файл. Ако вече имате CSS файл за вашата уеб страница, редактирайте CSS файла и добавете следния код.

2. Добавете следния код в CSS файла.

 .floatRight {поплавък: право; марж ляв: 20px} 

Съвет: Добавяне на float: наляво ще направи изображението плуващо в лявата страна на текста.

Ако искате да имате повече от едно плаващо изображение отдясно, добавете следния ред в CSS файла.

 .floatRightClear {поплавък: прав ясно: право; марж ляв: 20px} 

3. След като горният код бъде създаден, запишете CSS файла и го извикайте от всяка HTML страница, като използвате код, подобен на примера по-долу. В нашия пример нарекохме CSS файла style.css.

4. И накрая, добавете към всяко изображение, което искате да плувате на дясната страна на контейнера.