คุณสมบัติ clear ของ HTML DOM Style: ควบคุมการลอย (Float)

คุณสมบัติ clear ใช้สำหรับกำหนดหรือดึงค่าตำแหน่งขององค์ประกอบที่ลอย (Floated Element) ระบุว่าองค์ประกอบควรเลื่อนลงใต้องค์ประกอบที่ลอยหรือไม่

ไวยากรณ์ (Syntax)

object.style.clear = 'none|left|right|both|initial|inherit'

ค่าที่รองรับ

ค่า	คำอธิบาย
none	ไม่เคลียร์ อนุญาตให้ลอยทั้งสองด้าน (ค่าเริ่มต้น)
left	ไม่ให้ลอยด้านซ้าย (เลื่อนลงใต้องค์ประกอบ float: left)
right	ไม่ให้ลอยด้านขวา (เลื่อนลงใต้องค์ประกอบ float: right)
both	ไม่ให้ลอยทั้งสองด้าน (เลื่อนลงใต้ทุกอย่าง)
initial	ตั้งค่ากลับเป็นค่าเริ่มต้น
inherit	สืบทอดจากพาเรนต์

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  img {
    margin: 5px;
    float: right;
    clear: both;
    border: 2px solid orange;
  }
  #DIV1 {
    clear: left;
  }
</style>
<script>
  function changeClear() {
    document.getElementById("DIV1").style.clear = "right";
    document.getElementById("Sample").innerHTML = "คุณสมบัติ clear ของ div เปลี่ยนเป็น right แล้ว";
  }
</script>
</head>
<body>
<img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg" alt="QlikView Logo">
<div id="DIV1">
  นี่คือข้อความตัวอย่างภายใน div นี่คือบรรทัดอีกบรรทัดหนึ่งใน div
  div นี้สร้างขึ้นเพื่อสาธิตคุณสมบัติ clear
</div>
<p>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติ clear ของ div ด้านบน</p>
<button onclick="changeClear()">เปลี่ยน Clear</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: div อยู่ด้านซ้าย (clear: left) หลีกเลี่ยงรูปภาพ float: right
หลัง: div เลื่อนไปด้านขวา (clear: right)

การทำงานของ Clear (Visual)

float: left 元素 A    float: right 元素 B
┌─────────┐          ┌─────────┐
│    A    │          │    B    │
└─────────┘          └─────────┘

clear: left 元素 C    clear: right 元素 D    clear: both 元素 E
        ┌─────────┐                    ┌─────────┐
        │    C    │                    │    E    │
        └─────────┘                    └─────────┘
(อยู่ใต้ A)          (อยู่ใต้ B)              (อยู่ใต้ A และ B)

Clearfix Hack (เทคนิคคลาสสิก)

/* Clearfix สำหรับ container ที่มีลูก float */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* หรือ Modern way */
.container {
  display: flow-root; /* สร้าง Block Formatting Context ใหม่ */
}

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

Layout แบบเก่า (Float-based Layout)
ป้องกัน Container Collapse (พาเรนต์สูง 0 เพราะลูก float ทั้งหมด)
จัดวางเนื้อหารอบรูปภาพ (Text wrapping around images)

สมัยใหม่: ใช้ Flexbox/Grid แทน

แทนที่จะใช้ float + clear ให้ใช้:

display: flex - จัดวาง 1 มิติ
display: grid - จัดวาง 2 มิติ
display: flow-root - contain floats