Tag: clear

ผมมี 2 คำถาม ที่ดูเหมือนกวนบาทาเป็นอย่างมาก แต่คำตอบนั้น แตกต่างกันโดยสิ้นเชิงและไม่ได้แสดงอาการกวนช่วงล่างของขาแต่อย่างใด

อาการ ไม่ไหวจะเคลียร์ เกิดขึ้นเมื่อ เลย์เอ้าท์ ที่อยู่ติดกันสองอัน กระโดดไป"ซ้นดากกัน" หรือภาษากลางเรียก ไปซ้อนกัน ทำให้หน้าเว็บเละ และพัง ดูแล้วเหมือนใส่น้ำปลาเยอะไป สาเหตุเกิดมาจากการใช้ Float property ของ CSS นั่นเอง

คำถามมีอยู่ว่า ทำไม เมื่อใช้ float แล้ว มันต้องเป็นอย่างนั้นด้วย เคยสงสัยถามกันบ้างใหม หรือว่า เห็นเขาพากันทำมาอย่างนั้น มันจึงต้องเคลียร์ ไม่รู้เลยว่าเคลียร์ มันมายังไง แค่เคลียร์แล้วมันหายก็จบ เสร็จแล้วก็คิดไม่พบ พอเจอปัญหาก็ clear:both; (บางคนออกเสียง เคลียโบ้ท แปลเป็นไทยถึกๆ ว่า "สละเรือ" หึหึ)

การจัดวาง layout เพื่อใส่ content ในเวปนั้น เราสามารถใช้ได้ทั้ง การกำหนด position หรือการใช้ float ซึ่งทั้งสองมีรูปแบบการใช้ที่แตกต่างกัน โดยในที่นี้เราจะพูดถึงการใช้ Float กับการจัดวาง Layout โดยสิ่งที่จะเจออย่างแรกคือ ปัญหาการใช้ float กับ block element ซึ่งอยู่ใน block element ที่เป็น  container แล้วตัว container ไม่ยืดตามเนื้อหาของ  block element ที่ใช้ float

ดังตัวอย่าง: css ที่ใช้คือ