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ó là trôi nổi, nó sẽ tràn ra bên ngoài vùng chứ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 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 {
  overflow: auto;
}

.img2 {
  float: right;
}