กลียร์ฟิกซ์และความสูงของพ่อแม่ใน CSS

ลองปล่อย div หนึ่งตัวที่มีคลาส parent ไว้ ลบข้อความออกจากมัน เหลือไว้แค่รูปภาพลอย อย่างที่คุณทราบแล้ว ในกรณีนี้ ความสูงของ div จะยุบตัวเหลือศูนย์ เหลือไว้เพียง เส้นขอบบนและล่าง ส่วนรูปภาพ จะโผล่ออกมาจาก div ด้านล่าง:

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

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

ลองทำให้รูปภาพลอย ขยายความสูงของ div ของเราดู วิธีที่ใช้คือ เทคนิคเจ๋งๆ - วาง div ที่ไม่มีข้อความพร้อมคลาส clearfix ไว้หลังรูปภาพ

รูปภาพของเราเป็นองค์ประกอบลอยและไม่ขยาย ความสูงของพ่อแม่ แต่ div กลียร์ฟิกซ์ - ไม่ใช่ องค์ประกอบลอยและมีผลต่อความสูงของพ่อแม่

เนื่องจาก div กลียร์ฟิกซ์มีคุณสมบัติ clear กำหนดไว้ ผลลัพธ์ที่ได้คือมันจะถูกผลักโดยรูปภาพ ลงล่างและอยู่ใต้รูปภาพ ขณะเดียวกันก็ ขยายความสูงของพ่อแม่

ตัว div กลียร์ฟิกซ์เองนั้นว่างเปล่าและมองไม่เห็นบนหน้าจอ แต่ในขณะเดียวกันก็ขยายความสูงของพ่อแม่

เอาล่ะ ลองทำดู:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

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

.clearfix {
	clear: both;
}