Tài liệu CSS chạy trực tiếp: Float và clear

Q: clear dùng để làm gì?

clear đẩy một phần tử xuống dưới mọi float đứng trước nó ở phía được chỉ định: clear: left, clear: right hoặc clear: both. Đây là cách ngăn nội dung chảy cạnh một float.

Float và clear trong CSS: cho chữ bao quanh ảnh

float đẩy một phần tử sang một bên và cho chữ chảy bao quanh nó, giống cách tạp chí đặt ảnh. Tìm hiểu float left, right và inline-start, clear, vì sao phần tử cha bị co lại quanh các float và display: flow-root sửa lỗi đó thế nào, cùng lý do float không còn được dùng để dàn trang.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

float làm gì

float đẩy một phần tử sang một bên của phần tử chứa và cho phần chữ đứng sau chảy bao quanh nó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

Margin trên hộp float giữ cho chữ không dính sát vào hộp. Margin là cách điều chỉnh khoảng cách đó; bản thân phần chữ không thể nhận margin hướng về phía float.

Các giá trị

Giá trị	Kết quả
`none` (mặc định)	Không float
`left`	Đẩy sát mép trái
`right`	Đẩy sát mép phải
`inline-start`	Đẩy về đầu dòng: bên trái trong tiếng Anh, bên phải trong tiếng Ả Rập hoặc tiếng Do Thái
`inline-end`	Đẩy về cuối dòng

inline-start và inline-end đi theo hướng viết, nên bố cục dùng chúng sẽ tự lật đúng trên các trang viết từ phải sang trái. Một phần tử float cũng trở thành block: display: inline được đổi thành block, nên width và height có tác dụng ngay cả trên span hoặc img.

Cho ảnh float trong đoạn văn

Cách dùng kinh điển: một ảnh nằm trong bài viết, chữ chảy bao quanh. Cho mỗi ảnh float về một phía:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear: dừng việc bao quanh

clear có nghĩa là "bắt đầu bên dưới mọi float đứng trước ở phía này". Dùng nó cho phần tử không được nằm cạnh float, chẳng hạn tiêu đề của phần tiếp theo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

Tiêu đề đầu tiên chen vào cạnh float. Tiêu đề thứ hai bắt đầu bên dưới float. clear nhận các giá trị left, right, both, inline-start, inline-end và none.

Phần tử cha bị co lại, và flow-root

Float nằm ngoài luồng bình thường, nên một phần tử chứa có toàn bộ con là float sẽ không còn gì trong luồng và co lại thành chiều cao bằng 0. Nền và viền của nó chỉ còn là một đường mảnh phía trên các float:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root tạo một block formatting context mới, thứ luôn bao trọn các float bên trong. Code cũ dùng "clearfix" để đạt cùng kết quả:

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

overflow: hidden hoặc auto cũng chứa được float, nhưng kèm tác dụng phụ là cắt bớt nội dung; xem overflow.

Float không dùng để dàn trang

Trước khi có flexbox và grid, cả bố cục trang được dựng từ các cột float, với clearfix và phép tính chiều rộng ở khắp nơi. Thời đó đã qua: float không căn giữa được, không làm các cột cao bằng nhau được, và vỡ bố cục khi kích thước nội dung thay đổi. Dùng display: flex hoặc display: grid cho hàng và cột, còn float để dành cho việc cho chữ bao quanh một thứ gì đó. Để căn giữa một ảnh thay vì cho chữ bao quanh, xem cách căn giữa ảnh.

Bao quanh theo một hình dạng

shape-outside cho chữ chảy theo một hình dạng thay vì hình chữ nhật của float. Thuộc tính này chỉ có tác dụng trên phần tử float:

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

Lỗi thường gặp

Phần tử cha có chiều cao bằng 0. Toàn bộ con của nó đều float. Thêm display: flow-root.
Dùng float để chia cột hoặc làm thanh điều hướng. Dùng flexbox hoặc grid.
Tưởng có float: center. Giá trị này không tồn tại. Căn giữa bằng flexbox, grid hoặc margin: 0 auto.
Nội dung sau float vẫn chảy bao quanh dù không muốn. Thêm clear: both, hoặc đặt float cùng phần chữ vào một phần tử chứa flow-root.
Dùng left và right vật lý trên trang đa ngôn ngữ. Dùng inline-start và inline-end để bố cục tự lật trong các ngôn ngữ viết từ phải sang trái.

Câu hỏi thường gặp

float trong CSS dùng để làm gì?

float đưa một phần tử ra khỏi luồng bình thường và đẩy nó sát mép trái hoặc mép phải của phần tử chứa. Chữ và nội dung inline đứng sau sẽ chảy bao quanh nó.

clear dùng để làm gì?

clear đẩy một phần tử xuống dưới mọi float đứng trước nó ở phía được chỉ định: clear: left, clear: right hoặc clear: both. Đây là cách ngăn nội dung chảy cạnh một float.

Vì sao phần tử cha của một phần tử float có chiều cao bằng 0?

Float nằm ngoài luồng bình thường, nên phần tử cha chỉ có con là float sẽ không còn nội dung nào trong luồng và bị co lại. Thêm display: flow-root cho phần tử cha, nó sẽ giãn ra để chứa các float bên trong.

Clearfix là gì?

Một mẹo để phần tử cha chứa được các float bên trong, thường là pseudo-element ::after với clear: both. Ngày nay display: flow-root trên phần tử cha làm cùng việc đó chỉ trong một dòng.

Có nên dùng float để dàn trang không?

Không. Float từng được dùng để chia cột khi chưa có flexbox và grid. Hãy dùng flexbox hoặc grid để dàn trang, và giữ float cho đúng việc ban đầu của nó: cho chữ bao quanh một ảnh hoặc một đoạn trích dẫn.

Khái niệm liên quan