Clearfix và chiều cao của phần tử cha trong CSS

Hãy để lại một thẻ div với lớp parent, loại bỏ văn bản khỏi nó, chỉ để lại hình ảnh được float. Như bạn đã biết, trong trường hợp này chiều cao của div sẽ co lại về 0, chỉ còn lại viền trên và viền dưới. Hình ảnh sẽ tràn ra ngoài div của chúng ta ở phía dưới:

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

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

Hãy làm sao để hình ảnh được float mở rộng chiều cao cho div của chúng ta. Để làm điều này, sử dụng một kỹ thuật khéo léo - đặt một thẻ div không có văn bản với lớp clearfix sau hình ảnh.

Hình ảnh của chúng ta là phần tử được float và không mở rộng chiều cao của phần tử cha, nhưng div-clearfix thì không được float và ảnh hưởng đến chiều cao của phần tử cha.

Vì thuộc tính clear được đặt cho div-clearfix, nên kết quả là nó sẽ bị đẩy xuống dưới bởi hình ảnh và đứng bên dưới nó, đồng thời mở rộng chiều cao của phần tử cha.

Bản thân div-clearfix rỗng và không hiển thị trên màn hình, nhưng lại mở rộng chiều cao của phần tử cha.

Vậy, hãy thử:

<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;
}