JSFiddle - React, Tailwind, and code Playground

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

HTML

<h2>Không có clear</h2>
<div class="div1">div1</div>
<div class="div2">lưu ý rằng div2 nằm sau div1 trong mã HTML. Tuy nhiên, vì div1 trôi về bên trái nên văn bản trong div2 sẽ chảy xung quanh div1.</div>
<br><br>

<h2>Có clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Ở đây, clear: left; di chuyển div4 xuống bên dưới div3 nổi. Giá trị "left" xóa các phần tử được chuyển sang bên trái. Bạn cũng có thể xóa "phải" và "cả hai".</div>

CSS

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}