css layout กับการใช้ overflow และ float

สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น

จากที่ได้เคยลองถามไถ่พรดู ก็ได้รู้ว่าสาเหตุนี้มันไม่ได้เกิดที่เราเขียนอะไรผิดครับแต่มันเป็น bugs ของเจ้า CSS นั่นเอง ซึ่งวิธีแก้นั้น เท่าที่ทุกคนทราบวิธีพื้นฐานเลยก็คือเราต้องสร้าง style ขึ้นมาอีกหนึ่งตัวเพื่อเอาไว้เคลียร์โดยเฉพาะเลย ซึ่งทำกันเช่นนี้

จะเห็นว่าเมื่อเรามีการสั่ง float เสร็จทั้งสองอย่างแล้วเราต้องมี element อีกหนึ่งตัวเรียก class ที่ชื่อว่า clear มาเพื่อเคลียร์ float ของเจ้า #container ที่มันเกิด bug ให้มันหายไปให้มันยืดตาม content ที่มีอยู่ใน left และ right แต่เคยรู้หรือไม่ว่าเราสามารถแก้ปัญหานี้ได้โดยกำหนดคุณลักษณะบางอย่างให้เจ้าตัวที่เป็นcontainer ได้เลยซึ่งก็คือ overflow: auto; นั่นเอง วิธีนี้ถูกโพสขึ้นครั้งแรกโดย Alex Walker โดยเจ้าตัวเองก็เครดิตให้กับ Paul O’Brien วิธีแก้ปัญหาทำดังนี้

จะเห็นว่าเราเพิ่ม overflow: auto; เข้าไป ลองนำ test ดูครับเจ้า container จะยืดตาม content ของ left กับ right โดยอัตโนมัติโดยที่ไม่ต้องใช้ element อีกตัวเรียก .clear เข้ามาล้าง float ที่ค้างอยู่ แต่วิธีนี้อาจจจะมีปัญหาแตกต่างกันในบาง Browser เช่น บางเบราเซอร์ต้องมีการกำหนดค่าอย่างใดอย่างหนึ่งนะครับระหว่าง width หรือ height หรือจำเป็นต้องกำหนดทั้งสองอย่างนะครับ ในกรณีนี้มีบางครั้งที่ความสูง หรือ ความกว้างมันเกินกว่าที่เรากำหนดแล้วมันทำให้เกิด scrollbar ขึ้นโดยอัตโนมัติ หรือเจ้า scrollbar นี่จะแสดงตัวขึ้นมาเองเลยใน IE5 (Mac) วิธีแก้ปัญหาก็คือ

  • กำหนดความกว้างซะ
  • ต้องแน่ใจว่าเจ้าตัวที่คุณต้องการ float นั่นน่ะ ไม่มีการ overlap กับเจ้าที่เป็น container
  • เปลี่ยน overflow: auto; เป็น overflow: hidden; ซะเลย

วิธีที่ชัวร์ก็ต้องเขียนออกมาแบบนี้ล่ะครับ

หวังว่าคงเป็นประโยชน์ และ ง่ายต่อการนำไปประยุกต์ใช้ครับ

เจอกันใหม่ครับ radiz

Back to Top

9 Responses to css layout กับการใช้ overflow และ float

  1. Piyapong Thanawang
    thanawang3rd

    โอ้ววเพิ่มขึ้นอีกบันทัดเดียวก้อแจ๋วเลยยยยงมตั้งนานTOT

    Reply

  2. โดม

    แหล่มเลย ใครไปดูหนังเรื่อง ตั๊ดสู้ฟุด ม่าง ๆ

    Reply

  3. เจ้าชายน้อย

    ยังงง ๆ อยู่ครับ แต่ก็ขอบคุณที่แนะนำทิปดี ๆ อีกหน่อยเก่งกว่านี้ ผมคงเข้าใจได้

    Reply

  4. tiamkeaw

    แหล่มเลย ขอบคุณkrub

    Reply

  5. IcEsTea

    เดี้ยมครับ (ดี+เยี่ยม)

    Reply

  6. jommann

    เด็ดจิงๆ เลยครับ ขอบคุณครับ สำหรับความรู้ที่ทำให้ รอยยักในสมองเพิ่มขึ้น

    Reply

  7. nrml

    แอร๊ยยย เคยเจอมาก่อนแทบอ๊วก ขอบพระคุณนะคร้าบบบ

    Reply

  8. หนุ่ม

    ไม่ทราบว่าจะไปถามที่หัวข้อไหน ขอถามที่นี่ละกันนะครับ

     
    อยากทราบว่ามีวิธีทำให้ สีพื้นหลังโปรงแสง ได้มั้ยครับ

     
    ประมาณว่า Opacity ประมาณนี้อะครับ

     
    รบกวนทีนะครับ

    Reply

  9. เม่น

    ขอบคุณครับ ชี้ทางสว่างเลย งมมาทั้งวันและเนี่ย

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top