การใช้คุณสมบัติลอย CSS คุณสามารถลอยภาพใด ๆ ไปทางขวาของข้อความใด ๆ ที่สามารถเห็นได้ด้วยภาพด้านขวาของข้อความนี้ ในการทำสิ่งนี้บนหน้าเว็บของคุณ

ในตัวอย่างนี้เราจะใช้ไฟล์ CSS ภายนอก โดยการใช้ไฟล์ CSS ภายนอกคุณสามารถสร้างภาพลอยในหน้าใดก็ได้ที่มีลิงค์ไปยังไฟล์ CSS ไฟล์ CSS ภายนอกยังทำให้การเปลี่ยนการตั้งค่าใด ๆ ที่คุณอาจต้องการปรับเปลี่ยนง่ายขึ้นในอนาคต

1. สร้างไฟล์ CSS หากคุณมีไฟล์ CSS สำหรับหน้าเว็บของคุณอยู่ให้แก้ไขไฟล์ CSS และเพิ่มรหัสต่อไปนี้

2. เพิ่มรหัสต่อไปนี้ไปยังไฟล์ CSS

 .floatRight {ลอย: ขวา; ขอบซ้าย: 20px} 

เคล็ดลับ: การเพิ่มการลอย: ซ้ายจะทำให้รูปภาพลอยที่ด้านซ้ายของข้อความ

หากคุณต้องการให้รูปภาพมากกว่าหนึ่งภาพลอยอยู่ทางด้านขวาให้เพิ่มบรรทัดต่อไปนี้ในไฟล์ CSS

 .floatRightClear {ลอย: ขวา; ชัดเจนขวา; ขอบซ้าย: 20px} 

3. หลังจากสร้างโค้ดด้านบนแล้วให้บันทึกไฟล์ CSS และโทรจากหน้า HTML แต่ละหน้าโดยใช้รหัสที่คล้ายกับตัวอย่างด้านล่าง ในตัวอย่างของเราเราได้ตั้งชื่อไฟล์ CSS style.css

4. ในที่สุดเพิ่มไปยังภาพใด ๆ ที่คุณต้องการลอยบนด้านขวาของภาชนะ