Tác động của float lên phần tử cha trong CSS

Giả sử bây giờ chúng ta có một thẻ div, bên trong chứa một bức ảnh. Chúng ta sẽ đặt đường viền cho div, còn bức ảnh thì tạm thời chưa đặt thuộc tính float.

Hãy xem nó sẽ hiển thị như thế nào trong trình duyệt:

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

div {
	border: 1px solid red;
}

Bây giờ hãy đặt cho bức ảnh thuộc tính float với giá trị left. Trong trường hợp này, một điều kỳ lạ sẽ xảy ra - chiều cao của phần tử cha sẽ biến mất, đường viền dưới của nó sẽ bắt đầu ngay sau đường viền trên, còn bức ảnh sẽ tràn ra ngoài phần tử cha từ phía dưới:

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

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

Kết quả là, các phần tử được đặt thuộc tính float, sẽ không làm giãn chiều cao của phần tử cha của chúng.

Hãy thay giá trị left của thuộc tính float bằng giá trị right. Hành vi của phần tử cha sẽ không thay đổi, nhưng bức ảnh sẽ bắt đầu float sang bên phải:

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

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