Văn bản trong phần tử chứa float trong CSS

Hãy bỏ thuộc tính height cho div và đặt một đoạn văn bản ngắn trước hình ảnh.

Trong trường hợp này, chiều cao của div chúng ta sẽ bằng chiều cao của văn bản, còn hình ảnh vẫn sẽ tràn ra ngoài div:

<div>
	văn bản
	<img src="img.png" alt="">
</div>

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

Hãy đặt văn bản sau hình ảnh - kết quả sẽ không thay đổi:

<div>
	<img src="img.png" alt="">
	văn bản
</div>

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

Hãy làm để hình ảnh float về phía bên trái - kết quả sẽ tương tự:

<div>
	<img src="img.png" alt="">
	văn bản
</div>

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

Hãy thêm một div nữa ở phía dưới - hình ảnh sẽ chồng lên cả nó:

<div>
	<img src="img.png" alt="">
	văn bản
</div>
<div>
	văn bản
</div>

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

Nếu trong div đầu tiên chúng ta thêm nhiều văn bản đến mức chiều cao của nó lớn hơn hình ảnh - hình ảnh sẽ không chồng lên div thứ hai:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	văn bản
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

Điểm này rất quan trọng - khi phát triển có thể xảy ra trường hợp trong một khối nào đó bạn có rất nhiều văn bản, nhưng sau đó trong quá trình vận hành thực tế của trang web, khối này lại có ít văn bản hơn dự kiến. Kết quả là, trong trường hợp này, vấn đề với việc các phần tử float chồng lên các khối liền kề sẽ xuất hiện.