Hủy bỏ bao quanh bằng thuộc tính clear trong CSS

Để giải quyết vấn đề như vậy, tồn tại một thuộc tính đặc biệt clear, hủy bỏ bao quanh. Giá trị left hủy bỏ bao quanh bên trái, giá trị right - bên phải, và giá trị both - từ cả hai phía. Giá trị này được sử dụng thường xuyên nhất.

Vậy, thuộc tính clear hủy bỏ bao quanh. Trong trường hợp của chúng ta, điều này sẽ cho phép chúng ta làm sao để hình ảnh nổi từ div thứ nhất không tràn lên div thứ hai.

Trong đó, clear nên được đặt cho phần tử mà các phần tử nổi không được phép tràn lên, tức là trong trường hợp của chúng ta, nó nên được đặt cho div thứ hai.

Hãy làm điều này - cho div thứ hai ngoài lớp parent thêm cả lớp clearfix và cho lớp mới này đặt thuộc tính clear với giá trị both - hiện tượng hình ảnh tràn lên sẽ biến mất:

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

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

.clearfix {
  clear: both;
}

Результат:

Tên clearfix là tên được chấp nhận chung, vì vậy hãy sử dụng chính nó trong tương lai.