แนวทาง ในการแก้ไขปัญหา Float Model

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

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

xhtml

ผลที่ได้จะเห็นว่าตัวกล่องหลักจะไม่ยืดไปคลุมกล่องเล็กที่เราได้ Float ไว้ในช่วงแรกก็ได้มีการแก้ไขปัญหานี้ โดยการใช้  clear โดยจะเพิ่ม element ขึ้นมาใส่ไว้ต่อจาก content ที่อยู่ใน container โดยใช้ {clear:both;} ดังนี้

หรือใน IE  สามารถแก้โดยใช้อีกวิธี โดยตามปกติใน IE นั้น Block element container จะยืดตามเนื้อหา ก็ต่อเมื่อมีการกำหนดขอบเขตของ ตัวBlock element container ใน css ก็จะสามารถแก้ได้  เช่น {height:1%;}

ซึ่งการแก้ปัญหาโดยวิธี clear นั้นเป็นวิธีที่ไม่ถูกหลักเท่าไร เพราะเป็นการเพิ่ม element ลงใน markup ของ html โดยตรง ซึ่งมันผิดหลักของการเขียนตาม Standard ที่ดี และ ยังต้องตามไปใส่ท้ายเรื่อย ๆ เมื่อมีการเรียกใช้ในลักษณะนี้ตลอด รวมทั้งต้องไปแก้บัคของ IE6 อีก เช่น IE/Win Guillotine Bug (อธิบายต่อด้านล่าง) หรือ IE6 Peekaboo Bug เลยเป็นปัญหาว่าเราจะทำอย่างไร ที่จะ clear โดยที่ไม่ต้องไปยุ่งกับ markup ของ html เลย จึงเกิดวิธีนี้ขึ้นมาให้เพื่อน ๆ พิจารณากันอีก

การใช้ :after

ใน css2 นั้นเราสามารถ ใส่content พิเศษโดยใช้ cssได้ โดยที่ไม่ต้องไปยุ่งกับ markup ของ html การใช้ โดยเราจะใช้ :after กับ element ที่ต้องการใช้ ใส่จุด (.) โดยใช้ content {clear:both;} ใส่ {height:0;} เพื่อไม่ให้เกิดช่องว่างด้านล่างของ elementที่เรา กับ element ทีใช้ float และใส่ {visibility: hidden;}เพื่อไม่ให้จุด(.)ที่เราใส่แสดง ส่วนการใช้ {display:block;} นั้นเพื่อเปลี่ยน :after element เพราะว่า default หลักของมันเป็น” inline” และทำให้ไม่สามารถใช้ clear ได้ ดังนั้นจึงต้องเปลี่ยนให้เป็น block

จึงต้องเพิ่ม css ดังนี้

ในส่วนของ ie ยังไม่ทำงานกับ pseudo-elements ซึ่งเป็น css2 ได้ จึงต้องใช้การกำหนดค่า {height : 1%;} ไว้ที่ตัว  elementsที่เป็น container ดังที่ได้เคยอธิบายไว้ด้านบนแล้ว

แต่ยังมีปัญหาอีกอย่างหนึ่งกับ ie6 คือ IE/Win Guillotine Bug กิโยตินบัค จะตัดในส่วนของเนื้อหา ด้านล่างภายใน elements ที่ใช้ float โดยมันจะตัดส่วนด้านล่างให้มากสุดเท่ากับ elementหลัก โดยจะเกิดเมื่อ มีการใส่ linkขณะ hover

ปัจจัยที่ทำให้เกิดนั้น

  • มี(container) div ใหญ่อยู่1อัน
  • float อยู่ในหลักที่ไม่ clear
  • link ไม่ได้float และอยู่ต่อจาก float
  • link tag a:hover style  มีการเปลี่ยน properties

เมื่อเกิดปัญหานี้เราจิงต้องใส่ {height:1%;} ลงใน content ที่non-floated  ใน elementsที่เป็น container เพื่อให้ bugนี้หายไป

ซึ่งวิธี ต่างๆที่บอกมานั้น ตอนนี้ใน Browser อื่นที่ไม่ใช่ IE แก้ได้โดยใส่ {overflow:hidden;} แค่บรรทัดเดียว ซึ่งจากที่อธิบายมานั้นแสดงให้เห็นว่าปัญหาต่าง ๆ  ที่เกิดมานั้นไม่ได้เกิดจาก CSS แต่เกิดมากจาก การพัฒนาของแต่ละ Browser ที่แตกต่างกัน และการเลือกใช้วิธีแก้ปัญหาในแต่ละ case ก็อาจจะต้องใช้แตกต่างกันไป หรือ ร่วมกัน หรือ ตามความเหมาะสม ซึ่งถ้าเราเจอปัญหากับการใช้ Float แล้วไม่ใช้มัน เราก็จะไม่พบปัญหา หรือข้อผิดพลาดของปัญหา ถ้าเราใช้เราก็จะรู้ว่าปัญหาที่เกิดขึ้นมานั้นมาจากส่วนไหน เราก็จะสามารถควบคุม หรือพัฒนาวิธีการเขียน CSS ต่อไปได้นั่นเอง

Back to Top

13 Responses to แนวทาง ในการแก้ไขปัญหา Float Model

  1. radiz

    ความรู้แน่น แต่เขียนแบบอายคนดูไปหน่อย

    Reply

  2. มุกมุกมุกมุกมุก

    สอนนู๋มั่ง

     

     
    คิดถึงบุคลากรปูชนียบุคคลอัจฉริยะ CSS ที่ Inpros จังง่ะ T^T

    Reply

  3. พร อันทะ

    ตูนึกว่า รดิส ที่ไหนได้ เขามาแล้วครับ

     

     
    ใช้ ไออีเจ็ด วินโดวส์โมบาย อ่าน

     

     
    จึงได้รูว่า ต้องปรับ css แสดงผลใหม่

     
    กลุ้มอีกรอบ

    Reply

  4. rookiedz

    ดีคับ หวัดดีคับพี่ radiz

     
    เป็นไงบ้างล่ะพี่สบายดีหรือเปล่า อิอิ

     
    ขอบคุณสำหรับบทความน่ะพี่ผมเข้ามาอ่านบ่อย ๆ

     
    แต่ไม่ค่อยจะรู้เรื่อง css สักเท่าไร

     
    ก็ได้ที่นี้แหละ ทำให้ผมได้รู้จัก css

     
    ทำต่อไปน่ะพี่ เป็นแรงใจให้

    Reply

  5. radiz

    บทความนี้พี่ไม่ได้เขียน เป็นเพื่อนพี่อีกที ชื่อโอ๊ต

    Reply

  6. oiljang

    เก่งนิ อาจารย์ดีช่ายม่าย พี่ยังแก้ไม่ตกเลย

     
    ว่างๆ สอนพี่บ้างนะ

    Reply

  7. bukoilza

    ดีมากๆเลยครับ โอ๊ตชวนฝัน

     
    {overflow:hidden;} ใช้ได้จริงๆ

    Reply

  8. jommann

    เป็นบทความที่ดีครับ ผมก้อกำลังศึกษาอยู่เหมือนกันครับ ถ้าเกิดมีปัญหา ผมจะสามารถ คุยหรือ ปรึกษาใครได้บ้างครับเนี้ยะ อาจรู้จัก

    Reply

  9. ดีแต่แย่

    พยายามสือถึงเนื้อหาดีนะครับ แต่ใช้ภาษาไทยได้แย่มากๆ

    Reply

  10. Anonymous

    ผมว่าทุกคนก็เก่งได้ครับ ไม่ใช่คนเขียนบทความเก่งหรอกครับ รู้จักค้นคว้า อ่านภาษาอังกฤษให้ออก คุณก็เก่งได้ครับ เนื้อหาที่เขียนมานี้ทั้งหมดมาจาก web เมืองนอกทั้งนั้น

    Reply

  11. หงส์

    คห. 11 คะ

    ความคิดเห็นน่าสนใจค่ะ

    แต่ประเด็นอยู่ที่ว่า…. คนเรามีน้ำใจที่จะค้นคว้า และแปลมาให้คนอื่นๆ ได้รับความรู้ต่อ แล้วมันยังไงเหรอคะ??

    ถ้าเป็นไปได้ รบกวนช่วยเหลือเรื่องข้อผิดพลาดบางประการที่เห็นว่าสมควรแก้ไข ยังดีซะกว่ามา..?..ไว้แล้วจากไปแบบนี้นะคะ ^^

    และรบกวนคุณ คห.10 มาช่วยเกลาภาษาไทยให้ด้วยค่ะ เผื่อว่าจะได้ใช้ความรู้ของคุณที่เรียนมาอย่างเต็มที่

    ใครเห็นด้วยยกมือขึ้น \\^o^/

    Reply

  12. ่jiw-cssnewbie

    ขอบคุณครับ สำหรับข้อมูล

    ตามหามา 3 ชั่วโมง !! สุดยอดครับ

    Reply

  13. Pingback: :before and :after css pseudo class selector นี้ไม่ได้มีไว้แค่ clear float | DaWebDev

Leave a Reply

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

Connect with Facebook

Back to Top