การยกเลิกการลอยด้วยคุณสมบัติ clear ใน CSS

เพื่อแก้ไขปัญหาดังกล่าว มีคุณสมบัติพิเศษ clear ซึ่งใช้ยกเลิกการลอย ค่า left ยกเลิกการลอยด้านซ้าย ค่า right - ด้านขวา และค่า both - ทั้งสองด้าน ค่านี้ เป็นค่าที่ถูกใช้บ่อยที่สุด

ดังนั้น คุณสมบัติ clear ยกเลิกการลอย ในกรณีของเรา สิ่งนี้จะช่วยให้เราทำได้ เพื่อให้ภาพลอยจาก div แรก ไม่ล้ำเข้าไปใน div ที่สอง

โดย clear ควรกำหนดให้กับ องค์ประกอบที่ไม่อนุญาตให้องค์ประกอบลอย ล้ำเข้ามา นั่นคือในกรณีของเราควร กำหนดให้กับ div ที่สอง

มาลองทำกัน - กำหนดให้ div ที่สอง นอกจากคลาส parent แล้วยังมีคลาส clearfix และสำหรับคลาสใหม่นี้ กำหนดคุณสมบัติ clear ด้วยค่า both - การล้ำ ของภาพจะหายไป:

html<div class="parent">
  <img src="img.png" alt="">
  ข้อความ
</div>
<div class="parent clearfix">
  ข้อความ
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

ชื่อ clearfix เป็นที่ยอมรับโดยทั่วไป ดังนั้นในอนาคตโปรดใช้ชื่อนี้