1. Web
  2. CSS
  3. Reference
  4. Properties
  5. clear

clear

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính clear trong CSS xác định xem phần tử có phải được di chuyển xuống dưới (xóa) các phần tử float đứng trước nó hay không. Thuộc tính clear áp dụng cho cả phần tử float lẫn phần tử không float.

Try it

clear: none;

clear: left;

clear: right;

clear: both;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="floated-left">Left</div>
    <div class="floated-right">Right</div>
    <div class="transition-all" id="example-element">
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  line-height: normal;
}

.floated-left {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: left;
}

.floated-right {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: right;
  height: 150px;
}

Cú pháp

css
/* Giá trị từ khóa */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Giá trị toàn cục */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;

Giá trị

none

Từ khóa cho biết phần tử không bị di chuyển xuống để xóa các phần tử float đứng trước.

left

Từ khóa cho biết phần tử được di chuyển xuống để xóa các float bên trái.

Từ khóa cho biết phần tử được di chuyển xuống để xóa các float bên phải.

both

Từ khóa cho biết phần tử được di chuyển xuống để xóa cả float bên trái lẫn bên phải.

inline-start

Từ khóa cho biết phần tử được di chuyển xuống để xóa các float ở phía đầu của khối chứa, tức là float bên trái đối với văn bản ltr và float bên phải đối với văn bản rtl.

inline-end

Từ khóa cho biết phần tử được di chuyển xuống để xóa các float ở phía cuối của khối chứa, tức là float bên phải đối với văn bản ltr và float bên trái đối với văn bản rtl.

Mô tả

Khi áp dụng cho các khối không float, nó di chuyển cạnh border của phần tử xuống dưới cho đến khi nó nằm dưới cạnh margin của tất cả các float liên quan. Margin trên của khối không float sẽ bị thu nhỏ.

Ngược lại, các margin dọc giữa hai phần tử float sẽ không bị thu nhỏ. Khi áp dụng cho các phần tử float, cạnh margin của phần tử dưới được di chuyển xuống dưới cạnh margin của tất cả các float liên quan. Điều này ảnh hưởng đến vị trí của các float sau, vì các float sau không thể được đặt cao hơn các float trước.

Các float liên quan cần được xóa là những float trước đó trong cùng ngữ cảnh định dạng khối.

Note: Nếu phần tử chỉ chứa các phần tử float, chiều cao của nó sẽ thu nhỏ về không. Nếu bạn muốn nó luôn có thể thay đổi kích thước để chứa các phần tử float bên trong, hãy đặt giá trị của thuộc tính display của phần tử thành flow-root.

css
#container {
  display: flow-root;
}

Định nghĩa hình thức

Initial valuenone
Applies toblock-level elements
Inheritedno
Computed valueas specified
Animation typediscrete

Cú pháp hình thức

clear = 
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

Ví dụ

clear: left

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

clear: right

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

clear: both

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

Đặc tả

Specification
Cascading Style Sheets Level 2
# propdef-clear
CSS Logical Properties and Values Module Level 1
# float-clear

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content