CSS : มารู้จัก Float กัน

float จะมี property 4 ตัว คือ

float

  • left ก็คือ สั่งให้ลอยชิดซ้าย
  • right คือ สั่งให้ลอยชิดขวา
  • inherit คือ ค่าที่สืบทอดมา
  • none คือ ไม่ต้องลอย [ซึ่งปรกติ element ทั่วไปจะเป็น none]

ลองมาดูตัวอย่างของคำสั่ง float แล้วกัน ว่ามันใช้งานแล้วได้ผลลัพธ์เป็นแบบไหน

ตัวอย่าง

จะเห็นว่า รูปของยูริ จะลอยอยู่ทางด้านขวาของหน้าเว็บตามที่เราสั่งไว้

ลองมาดูตัวอย่างต่อไปนะครับ ถ้าเรามี div สามตัว เหมือนใน ตัวอย่าง

ถ้าเราต้องการให้มันมาลอยชิดกัน เราก็ไปสั่งมันแบบนี้ [div ทั้งสามตัวมี class ชื่อ block นะครับ]

ซึ่งผลลัพธ์ที่ได้จะเป็นแบบนี้ ตัวอย่าง

div ทั้งสามตัวก็มาลอยเรียงติดกันอย่างสวยงาม

แล้วถ้า float มันใช้งานง่ายแบบนี้ มันจะมีปัญหาอะไรละ เราลองไปดูบ้าง ว่าปัญหาที่เจอมันจะเป็นแบบไหน

จาก code แล้ว เราจะต้องมีสี่เหลี่ยมให้เห็นทั้งหมดสี่อัน แต่ถ้าดูจาก ตัวอย่าง แล้ว

เราจะพบว่า มีสี่เหลี่ยมให้เราเห็นเพียงสามอันเท่านั้น เนื่องจาก item-1 และ item-2 ลอยชิดซ้ายกันอยู่ ส่วน item-3 นั้นอยู่ใต้ item-1 ที่ลอยอยู่ ทำให้เราไม่เห็น item-3

ดังนั้นจึงมีอีกคำสั่ง clear มาเพื่อแก้ปัญหานี้ โดย clear นั้นจะมี property 5 ตัว คือ

clear

  • left คือ ไม่ให้มีอะไรลอยอยู่ด้านซ้าย
  • right คือ ไม่ให้มีอะไรลอยอยู่ด้านขวา
  • both คือ ไม่ให้มีอะไรลอยอยู่ทั้งสองด้าน
  • none คือ อยากจะลอยก็ลอย ตูไม่ยุ่ง
  • inherit คือ ค่าที่สืบทอดมา

ดังนั้นเราลองมาเพิ่มคำสั่ง clear ไปให้ item-3 กันดีกว่า โดยเราจะใส่ดังนี้

เราจะได้ผลลัพธ์ดังนี้ ตัวอย่าง

ที่เราสั่ง clear:left; เพราะว่า เรามองว่ามี item-1 และ item-2 ลอยอยู่ด้านซ้ายของ item-3 เราจึงสั่งไม่ให้มีอะไรมาลอยอยู่ด้านซ้ายของ item-3

คราวนี้เรามาลองประยุกต์ใช้งานจริง โดยเราแบ่งเว็บออกเป็น 4 ส่วนดังนี้

  • header อยู่ด้านบน
  • content อยู่ตรงกลางด้านซ้าย
  • sidebar อยู่ตรงกลางด้านขวา
  • footer อยู่ด้านล่าง

เราก็จะได้เว็บตามที่เราวางโครงไว้ ตัวอย่าง

แต่ถ้าเกิดเราลืมใส่ clear:both; ให้ footer ละ จะเกิดอะไรขึ้น ตามไปดู ตัวอย่าง กันเลยครับ

จะเห็นว่าตัว footer จะไปอยู่ทางด้านขวาแทนที่จะอยู่ด้านล่างอย่างที่เราต้องการ โดยตัว content และ sidebar จะลอยบังส่วนของ footer ไว้ และเหลือให้เราเห็นในส่วนที่ content และ sidebar ไม่ได้บัง

เรามาลองดูอีกปัญหานึงที่น่าจะได้เคยพบเจอกัน ลองดูจาก ตัวอย่าง นะครับ

ถ้าเราดูจาก code แล้ว ต้องจะมีพื้นหลังสีดำให้เราเห็น แต่จากที่เราดูในตัวอย่าง จะไม่เห็นพื้นหลังสีดำเลย วิธีแก้ไขก็มีอยู่หลายวิธี แต่จะขอนำเสนออยู่สองแบบ คือ

  • ใช้ overflow:hidden
  • ใช้ clearfix

overflow:hidden

ให้เราใส่ overflow:hidden ใน #wrapper ตัวอย่าง

clearfix

ให้เราใส่ class=”clearfix” ใน div id=”wrapper” และเพิ่ม CSS ของ class=”clearfix” เข้าไป ตัวอย่าง

12 thoughts on “CSS : มารู้จัก Float กัน”

    1. เขียนไว้ตั้งนานละ เคยคิดจะเข้ามาอ่านบ้างมั้ย – -“

  1. รบกวนสอบถามนิดนึงค่ะพอดีทำตามแล้วสงสัย
    คือtag h1 DDDD…ไม่ได้สั่ง flow left แต่ทำไมมันถึงไปขึ้นต่อ item-2 อะคะ
    มันน่าจะไปซ่อนหลังitem-1 (กรณีที่เราไม่ได้สั่งclear เหมือนitem-3) ถ้าพอมีเวลาผ่านมารบกวนไขข้อสงสัยให้หน่อยนะค่า

  2. รบกวนสอบถามนิดนึงค่ะพอดีทำตามแล้วสงสัย
    คือtag h1 DDDD…ไม่ได้สั่ง flow left แต่ทำไมมันถึงไปขึ้นต่อ item-2 อะคะ
    มันน่าจะไปซ่อนหลังitem-1 (กรณีที่เราไม่ได้สั่งclear เหมือนitem-3) ถ้าพอมีเวลาผ่านมารบกวนไขข้อสงสัยให้หน่อยนะค่า

Leave a Reply

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