คุณสมบัติ float

คุณสมบัติ float - กำหนดบล็อคลอย ซึ่งข้อความจะไหลล้อมรอบ คุณสมบัติ float บางครั้งใช้งาน ร่วมกับคุณสมบัติ clear ซึ่ง ยกเลิกการไหลล้อมรอบขององค์ประกอบ

แม้ว่าในตอนแรก float ถูกคิดค้นขึ้น สำหรับแทรกบล็อคลอยในข้อความ แต่ใน ปัจจุบันมีการใช้งานอย่างแพร่หลาย และในรูปแบบที่ไม่เป็นมาตรฐานสำหรับการสร้างเลย์เอาต์

ไวยากรณ์

ตัวเลือก {
	float: left | right | none;
}

ตัวเลือก {
	clear: both | left | right | none;
}

ค่าสำหรับ float

ค่า	คำอธิบาย
`left`	บล็อกจะลอย ทางซ้าย และข้อความจะไหลล้อมรอบมัน ทางขวา
`right`	บล็อกจะลอย ทางขวา และข้อความจะไหลล้อมรอบมัน ทางซ้าย
`none`	ไม่มีไหลล้อมรอบ

ค่าดีฟอลต์: none

ค่าสำหรับ clear

ค่า	คำอธิบาย
`left`	ยกเลิกการไหลล้อมรอบทางซ้าย
`right`	ยกเลิกการไหลล้อมรอบทางขวา
`both`	ยกเลิกการไหลล้อมรอบทั้งทางซ้ายและทางขวา
`none`	ไม่มียกเลิกการไหลล้อมรอบ

ค่าดีฟอลต์: none

ตัวอย่าง

ใช้ float ในรูปแบบที่ไม่เป็นมาตรฐาน โดยวางรายการในรายการให้อยู่ในแนวเดียวกัน:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

li {
	float: left;
	border: 1px solid red;
}

ดูเพิ่มเติม

คุณสมบัติ clear,
ซึ่งยกเลิก float สำหรับองค์ประกอบด้านบน