JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<h2>Clearfix</h2>

<p>Trong ví dụ này, hình ảnh cao hơn phần tử chứa nó và nó được thả nổi, vì vậy nó tràn ra bên ngoài vùng chứa của nó:</p>

<div>
  <img class="img1" src="https://timoday.edu.vn/wp-content/uploads/2021/04/pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">Thêm một lớp clearfix với overflow: auto; vào phần tử chứa, để khắc phục sự cố này:</p>

<div class="clearfix">
  <img class="img2" src="https://timoday.edu.vn/wp-content/uploads/2021/04/pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

CSS

div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.img2 {
  float: right;
}