Використовуючи властивості CSS float, ви можете плавати будь-яке зображення праворуч від будь-якого тексту, як це можна бачити з зображенням праворуч від цього тексту. Для цього на веб-сторінці виконайте наведені нижче дії.

У цьому прикладі ми будемо використовувати зовнішній CSS-файл. Використовуючи зовнішній файл CSS, ви можете створити плаваюче зображення на будь-якій сторінці, яка містить посилання на файл CSS. Зовнішні файли CSS також полегшують змінення будь-яких налаштувань, які ви можете налаштувати в майбутньому.

1. Створіть файл CSS. Якщо у вас вже є файл CSS для веб-сторінки, відредагуйте свій файл CSS і додайте наступний код.

2. Додайте наступний код до файлу CSS.

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

Порада: Додавання float: ліворуч зробить зображення плаваючим у лівій частині тексту.

Якщо ви хочете мати більше одного зображення, що плаває праворуч, також додайте наступний рядок до файлу CSS.

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

3. Після створення вищезгаданого коду збережіть файл CSS і викликайте його з кожної HTML-сторінки, використовуючи код, подібний до наведеного нижче прикладу. У нашому прикладі ми назвали файл CSS style.css.

4. Нарешті, додайте до будь-якого зображення, яке ви хочете плавати, на правій стороні контейнера.