การจัดตำแหน่งโดย CSS ด้วย float และ clear

float และ clear เป็น property ที่สำคัญอันหนี่ง ที่มีไว้เพื่อการจัดตำแหน่งของ layout ในแบบ tableless property ทั้งสองตัวมีความหมายดังนี้ครับ

float: left มีความหมายเหมือนกับ align=left แหละครับ คือจัดให้ชิดซ้าย
float: right มีความหมายเหมือนกับ alight=right ครับ คือจัดให้ชิดขวา
clear: left หมายถึง ไม่ให้มีอะไรอยู่ข้างซ้ายของมัน
clear: right หมายถึง ไม่ให้มีอะไรอยู่ด้านขวาของมัน
clear: both หมายถึง ไม่ให้ทีอะไรอยู่ทั้ง 2 ด้านของมันเลย

โค้ด CSS ด้านบนจะให้ผลลัพท์เหมือนด้านล่างนี่แหละครับ
ถ้าสังเกตุให้ดีจะเห็นอะไรแปลกๆอยู่อย่างหนึ่ง คือ <br class="clear" /> มันมีไว้ทำอะไรหว่า...(อยากรู้ก็ลองถอดออกดูสิครับ)

โค้ดด้านบน หากไม่มี <br class="clear" /> มันจะแสดงผลได้ถูกต้องบน IE ครับ แต่ถ้าเป็น Firefox พื้นหลัง(สีเทา) มันจะไม่ขยายตามความสูงของ box ทำให้เราต้อง hack มันด้วยการเติม <br class="clear" /> ลงไปในโค้ดเพื่อให้มันแสดงผลได้เหมือนๆกันในทุกบราวเซอร์

ในทางปฏิบัติเราอาจใช้ br หรือ div ก็ได้ครับ โดยใช้ร่วมกับ class clear

แต่ไม่แนะนำ p หรือ span เนื่องจาก p และ span เป็น text node ถ้าไม่มีข้อความภายในอาจไม่ผ่านการ validate w3c ครับ

ลองมาดูตัวอย่างการทำ layout ดูครับ

โค้ดด้านบน จะให้ผลลัพท์ดังด้านล่างนี้ครับ