การใช้งาน CSS Float

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ CSS Positioning ซึ่งเป็นเครื่องมือที่ช่วยให้เราควบคุมตำแหน่งของ Element บนหน้าเว็บได้อย่างแม่นยำ ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับอีกหนึ่งคุณสมบัติที่สำคัญในการจัด Layout คือ float ซึ่งช่วยให้เราสามารถจัด Element ให้ลอยไปทางซ้ายหรือขวาได้

Float คืออะไร?

float เป็นคุณสมบัติ CSS ที่ใช้ในการจัดวาง Element ให้ลอยไปทางด้านซ้ายหรือด้านขวาของ Container หลัก ทำให้ Element อื่นๆ (เช่น ข้อความ) สามารถไหลรอบๆ Element ที่ถูก Float ได้ โดยปกติแล้วเรามักใช้ float ในการสร้าง Layout แบบหลายคอลัมน์ หรือจัดวางรูปภาพให้อยู่ข้างๆ ข้อความ

ค่าของ Float

คุณสมบัติ float สามารถมีค่าได้ 3 ค่าหลักๆ:

left: ทำให้ Element ลอยไปทางด้านซ้าย
right: ทำให้ Element ลอยไปทางด้านขวา
none: (ค่าเริ่มต้น) Element ไม่ลอยและอยู่ในตำแหน่งปกติ

ตัวอย่างการใช้งาน `float: left`

สมมติว่าเรามีรูปภาพและข้อความ และต้องการให้รูปภาพอยู่ทางด้านซ้ายของข้อความ เราสามารถใช้ float: left กับรูปภาพได้ดังนี้:

<div class="container">
  <img src="image.jpg" alt="My Image" class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.float-left {
  float: left;
  margin-right: 10px; /* เพิ่มระยะห่างระหว่างรูปภาพและข้อความ */
}

.container {
  width: 500px; /* กำหนดความกว้างของ Container */
}

ในตัวอย่างนี้ รูปภาพที่มี Class float-left จะลอยไปทางด้านซ้าย และข้อความจะไหลรอบๆ รูปภาพ นอกจากนี้ เรายังเพิ่ม margin-right เพื่อให้มีระยะห่างระหว่างรูปภาพและข้อความ

ตัวอย่างการใช้งาน `float: right`

ในทางกลับกัน หากเราต้องการให้รูปภาพอยู่ทางด้านขวาของข้อความ เราสามารถใช้ float: right ได้ดังนี้:

<div class="container">
  <img src="image.jpg" alt="My Image" class="float-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.float-right {
  float: right;
  margin-left: 10px; /* เพิ่มระยะห่างระหว่างรูปภาพและข้อความ */
}

.container {
  width: 500px; /* กำหนดความกว้างของ Container */
}

ในตัวอย่างนี้ รูปภาพที่มี Class float-right จะลอยไปทางด้านขวา และข้อความจะไหลรอบๆ รูปภาพ เราใช้ margin-left เพื่อให้มีระยะห่างระหว่างรูปภาพและข้อความ

ปัญหาที่พบบ่อยกับการใช้งาน Float: Container Collapse

ปัญหาที่พบบ่อยที่สุดในการใช้งาน float คือ Container Collapse หรือการที่ Container ที่บรรจุ Element ที่ถูก Float ไม่สามารถขยายขนาดให้ครอบคลุม Element เหล่านั้นได้ ทำให้ Layout ดูผิดเพี้ยนไป

สาเหตุของปัญหานี้คือ เมื่อ Element ถูก Float มันจะถูกนำออกจาก Flow ปกติของ Document ทำให้ Container ไม่สามารถคำนวณความสูงของ Element เหล่านั้นได้

วิธีการแก้ไขปัญหา Container Collapse: Clear

วิธีที่พบบ่อยที่สุดในการแก้ไขปัญหา Container Collapse คือการใช้คุณสมบัติ clear คุณสมบัติ clear จะบอกให้ Element ไม่ยอมให้มี Element อื่นๆ ที่ถูก Float มาอยู่ข้างๆ

คุณสมบัติ clear สามารถมีค่าได้ 4 ค่าหลักๆ:

left: ไม่ยอมให้มี Element ที่ถูก Float ไปทางด้านซ้ายอยู่ข้างๆ
right: ไม่ยอมให้มี Element ที่ถูก Float ไปทางด้านขวาอยู่ข้างๆ
both: ไม่ยอมให้มี Element ที่ถูก Float ไปทางด้านซ้ายหรือขวาอยู่ข้างๆ
none: (ค่าเริ่มต้น) ยอมให้มี Element ที่ถูก Float อยู่ข้างๆ

วิธีการใช้งาน `clear: both`

วิธีที่ง่ายที่สุดในการแก้ไขปัญหา Container Collapse คือการเพิ่ม Element ที่มีคุณสมบัติ clear: both ไว้ที่ด้านล่างสุดของ Container

<div class="container">
  <img src="image.jpg" alt="My Image" class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <div style="clear: both;"></div> <!-- Clearfix -->
</div>

ในตัวอย่างนี้ เราเพิ่ม <div style="clear: both;"></div> ไว้ที่ด้านล่างสุดของ Container ซึ่งจะทำให้ Container ขยายขนาดให้ครอบคลุม Element ที่ถูก Float ได้

Clearfix Hack

อีกวิธีที่นิยมใช้กันคือ Clearfix Hack ซึ่งเป็นเทคนิคการใช้ Pseudo-element ::after เพื่อเพิ่ม Element ที่มีคุณสมบัติ clear: both เข้าไปใน Container โดยอัตโนมัติ

.container::after {
  content: "";
  display: table;
  clear: both;
}

จากนั้นเราก็สามารถเพิ่ม Class container ให้กับ Container ที่เราต้องการแก้ไขปัญหา Container Collapse ได้

<div class="container">
  <img src="image.jpg" alt="My Image" class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Clearfix Hack เป็นวิธีที่สะดวกและยืดหยุ่นกว่าการเพิ่ม Element ที่มีคุณสมบัติ clear: both ด้วยตนเอง

กรณีใช้งานจริง

การสร้าง Layout แบบ 2 คอลัมน์

เราสามารถใช้ float เพื่อสร้าง Layout แบบ 2 คอลัมน์ได้ โดยการกำหนด float: left ให้กับคอลัมน์ด้านซ้าย และกำหนด width ให้กับทั้งสองคอลัมน์

<div class="container">
  <div class="left-column">
    <h3>Left Column</h3>
    <p>Content of the left column.</p>
  </div>
  <div class="right-column">
    <h3>Right Column</h3>
    <p>Content of the right column.</p>
  </div>
  <div style="clear: both;"></div> <!-- Clearfix -->
</div>

.container {
  width: 800px;
}

.left-column {
  float: left;
  width: 300px;
  background-color: #f0f0f0;
  padding: 10px;
}

.right-column {
  float: left;
  width: 500px;
  background-color: #e0e0e0;
  padding: 10px;
}

ในตัวอย่างนี้ เราสร้าง Container ที่มีความกว้าง 800px และสร้าง 2 คอลัมน์ภายใน โดยคอลัมน์ด้านซ้ายมีความกว้าง 300px และคอลัมน์ด้านขวามีความกว้าง 500px เรากำหนด float: left ให้กับทั้งสองคอลัมน์เพื่อให้ลอยไปทางด้านซ้าย และใช้ clear: both เพื่อแก้ไขปัญหา Container Collapse

ข้อผิดพลาดที่พบบ่อย

ลืมกำหนดความกว้าง: หากไม่กำหนดความกว้างให้กับ Element ที่ถูก Float อาจทำให้ Layout ผิดเพี้ยน
ลืมแก้ไขปัญหา Container Collapse: หากไม่ใช้ clear หรือ Clearfix Hack อาจทำให้ Container ไม่สามารถขยายขนาดให้ครอบคลุม Element ที่ถูก Float ได้
การใช้ Float มากเกินไป: การใช้ Float มากเกินไปอาจทำให้ Layout ซับซ้อนและยากต่อการจัดการ ในปัจจุบันมี Flexbox และ CSS Grid ที่เป็นตัวเลือกที่ดีกว่าสำหรับการสร้าง Layout ที่ซับซ้อน

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับคุณสมบัติ float ซึ่งเป็นเครื่องมือที่สำคัญในการจัด Layout บนหน้าเว็บ เราได้เรียนรู้วิธีการใช้ float: left และ float: right เพื่อจัด Element ให้ลอยไปทางซ้ายหรือขวา และเรียนรู้วิธีการแก้ไขปัญหา Container Collapse ด้วย clear และ Clearfix Hack

แม้ว่าในปัจจุบันจะมี Flexbox และ CSS Grid ที่เป็นตัวเลือกที่ดีกว่าสำหรับการสร้าง Layout ที่ซับซ้อน แต่ float ก็ยังคงเป็นเครื่องมือที่มีประโยชน์ในการจัด Layout แบบง่ายๆ และเข้าใจได้ง่าย

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Layout ด้วย Flexbox ซึ่งเป็นเครื่องมือที่ทรงพลังและยืดหยุ่นกว่า float

การใช้งาน CSS Float