การปิดการทำงานของ Float ด้วยคุณสมบัติ Clear ใน CSS

คุณสมบัติ clear ใน CSS ใช้ระบุด้านขององค์ประกอบที่ลอย (floated element) ที่ต้องการให้เนื้อหาไม่ได้ไหลผ่าน

ตัวอย่างที่ 1: ใช้ clear:left

<!DOCTYPE html>
<html>
<head>
  <title>CSS Clear</title>
  <style type="text/css">
    .clear { clear: left; }
    .yellow { background-color: #FF8A00; }
    .red { background-color: #F44336; }
    .green { background-color: #4CAF50; }
    p {
      float: left;
      margin: 10px; padding: 10px; color: white;
    }
  </style>
</head>
<body>
  <p class="red">Important Notice</p>
  <p class="clear red">Important Notice</p>
  <p class="yellow">Mediocre Notice</p>
  <p class="green">Ignorable Notice</p>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้ clear:both ร่วม float:none

<!DOCTYPE html>
<html>
<head>
  <title>CSS Clear</title>
  <style type="text/css">
    p {
      float: left; margin: 10px; padding: 10px;
      color: white; background-color: #48C9B0; border: 4px solid #145A32;
    }
    p.noneFloat {
      float: none; clear: both; color: #34495E;
    }
  </style>
</head>
<body>
  <p>I am okay with shared space</p>
  <p class="noneFloat">I want a private space</p>
  <p>I am also okay with shared space</p>
  <p>Me too</p>
</body>
</html>

ผลลัพธ์

ค่าของ clear property

• none - ไม่เคลียร์ (ค่าเริ่มต้น)
• left - เคลียร์ด้านซ้าย
• right - เคลียร์ด้านขวา
• both - เคลียร์ทั้งสองด้าน
• inline-start/end - ตามทิศทางการเขียน