คุณสมบัติ clear

คุณสมบัติ clear ยกเลิก การไหลขององค์ประกอบอื่นๆ รอบองค์ประกอบหนึ่ง ที่กำหนดโดยคุณสมบัติ float สามารถรับค่าต่อไปนี้ได้: none (ยกเลิกการทำงานของตัวมันเอง), both (ยกเลิก float ทั้งจากขวาและซ้ายพร้อมกัน), left (ยกเลิก float จากซ้าย), right (ยกเลิก float จากขวา)

ไวยากรณ์

cssตัวเลือก {
  clear: none หรือ left หรือ right หรือ both
}

ตัวอย่าง

เรามายกเลิกการไหลของข้อความรอบภาพ จากด้านซ้าย:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

ตัวอย่าง

ตอนนี้เรามายกเลิกการไหลของข้อความรอบภาพ จากด้านขวา:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

ตัวอย่าง

เรามายกเลิกการทำงานของตัว คุณสมบัติ clear เอง:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

ดูเพิ่มเติม