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:

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

cssdiv {
  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:

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

cssdiv {
  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ự:

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

cssdiv {
  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ó:

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

cssdiv {
  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:

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

cssdiv {
  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.