Dengan menggunakan properti float CSS, Anda dapat mengapung gambar apa pun di sebelah kanan teks apa pun, seperti yang dapat dilihat dengan gambar di sebelah kanan teks ini. Untuk melakukan ini di halaman web Anda, ikuti langkah-langkah di bawah ini.

Dalam contoh ini, kita akan menggunakan file CSS eksternal. Dengan menggunakan file CSS eksternal, Anda dapat membuat gambar mengambang di halaman apa pun yang menyertakan tautan ke file CSS. File CSS eksternal juga memudahkan untuk mengubah pengaturan apa pun yang mungkin ingin Anda sesuaikan di masa mendatang.

1. Buat file CSS. Jika Anda sudah memiliki file CSS untuk halaman web Anda, edit file CSS Anda dan tambahkan kode berikut.

2. Tambahkan kode berikut ke file CSS.

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

Tip: Menambahkan float: left akan membuat gambar melayang di sisi kiri teks.

Jika Anda ingin memiliki lebih dari satu gambar mengambang di sebelah kanan, tambahkan juga baris berikut ke file CSS.

 .floatRightClear {float: kanan; jelas: kanan; margin-kiri: 20px} 

3. Setelah kode di atas dibuat, simpan file CSS dan panggil dari setiap halaman HTML menggunakan kode yang mirip dengan contoh di bawah ini. Dalam contoh kami, kami telah menamai file CSS style.css.

4. Terakhir, tambahkan ke gambar yang ingin Anda apung di sisi kanan wadah.