เพื่อใช้ภาพลอย (floating image) ใน HTML ใช้คุณสมบัติ CSS float มันอนุญาตให้คุณลอยภาพไปทางซ้ายหรือขวา ค่า property เพิ่มเติมมีดังนี้:
| Sr.No. | Property Value & Description |
|---|---|
| 1 | none ไม่ลอย (ค่าเริ่มต้น) |
| 2 | left ลอยไปทางซ้าย |
| 3 | right ลอยไปทางขวา |
| 4 | initial ค่าเริ่มต้น |
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Floating Image</title>
</head>
<body>
<h1>Float Right</h1>
<p>The below image floats to the right.</p>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" />
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
</p>
<h1>Float Left</h1>
<p>The below image floats to the left.</p>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" />
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
</p>
</body>
</html>
ผลลัพธ์
