Float Property
จัดตำแหน่งองค์ประกอบให้ลอย (Float) ไปทางซ้ายหรือขวาของ Container ใช้กันทั่วไปสำหรับ **Wrap Text รอบรูปภาพ** และ **Layout แบบเก่า (Legacy)**
ค่าหลัก
left: ลอยซ้ายright: ลอยขวาnone: ไม่ลอย (Default)inherit: 繼承จาก Parent
ตัวอย่าง: รูปภาพลอยขวาข้อความ
img { float: right; }
รูปจะอยู่ขวา ข้อความไหลรอบด้านซ้าย
ตัวอย่าง: รูปภาพลอยซ้าย พร้อม Margin
img {
float: left;
margin-right: 20px; /* ระยะห่างระหว่างรูปและข้อความ */
}
สร้าง Grid ด้วย Float (เทคนิคเก่า)
.image {
float: left;
width: 25%; /* 4 คอลัมน์ */
padding: 25px;
box-sizing: border-box; /* รวม padding ใน width */
}
ใช้ box-sizing: border-box บน * เพื่อคำนวณ Width ถูกต้อง
ข้อจำกัดและปัจจุบัน
- Float ไม่ได้ออกแบบมาเพื่อ Layout ทั้งหน้า
- ต้องใช้ Clearfix หาก Parent ความสูงพับ
- ปัจจุบันแนะนำ **Flexbox** หรือ **CSS Grid** แทน เพราะทรงพลังและง่ายกว่า
สรุป
Float ยังมีประโยชน์สำหรับการ Wrap Text รอบรูปภาพ หรือ Layout เรียบง่าย แต่สำหรับ Layout โครงสร้างหน้าเว็บ ควรใช้ Flexbox/Grid แทน
