การทำงานของฟล็อตต่อพาเรนต์ใน CSS

สมมติว่าตอนนี้เรามี div ซึ่งภายในมีรูปภาพอยู่ กำหนดขอบให้ div ส่วนรูปภาพ อย่ายังไม่กำหนดคุณสมบัติ float

มาดูกันว่าจะปรากฏในเบราว์เซอร์อย่างไร:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}

Результат:

ทีนี้ลองตั้งค่าคุณสมบัติ float ให้กับรูปภาพเป็นค่า left ใน กรณีนี้จะเกิดสิ่งที่น่าประหลาดใจ - ความสูง ของพาเรนต์จะหายไป ขอบล่างของมันจะ เริ่มต้นทันทีหลังจากขอบบน ส่วนรูปภาพ จะยื่นออกมาด้านล่างเกินพาเรนต์ของมัน:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

ปรากฎว่าองค์ประกอบที่มีการกำหนด คุณสมบัติ float ไม่ขยายความสูงให้กับพาเรนต์ของมัน

ลองเปลี่ยนค่าคุณสมบัติ float จาก left เป็นค่า right พฤติกรรม ของพาเรนต์จะไม่เปลี่ยน แต่รูปภาพจะเริ่ม ลอยทางด้านขวา:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат: