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

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

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

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

div {
	border: 1px solid red;
}

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

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

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

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

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

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

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