Thuộc tính clear CSS

Định nghĩa và cách sử dụng

Thuộc tính clear xác định bên nào của phần tử không cho phép xuất hiện các phần tử trôi khác.

Giải thích

Thuộc tính clear xác định哪 bên của phần tử không cho phép xuất hiện phần tử trôi. Trong CSS1 và CSS2, điều này được thực hiện bằng cách tự động tăng khoảng cách trên mép ngoài của phần tử cần làm sạch (tức là phần tử được đặt thuộc tính clear). Trong CSS2.1, sẽ tăng thêm khoảng trống làm sạch trên mép ngoài của phần tử, mà không thay đổi mép ngoài. Dù có thay đổi nào, kết quả cuối cùng đều như nhau, nếu chỉ định làm sạch bên trái hoặc bên phải, mép trên của phần tử sẽ chính xác ở dưới mép ngoài của phần tử trôi ở bên đó.

Xem thêm:

Giáo trình CSS:Định vị CSS

Tài liệu tham khảo HTML DOM:Thuộc tính clear

Ví dụ

Không cho phép phần tử trôi xuất hiện ở cả hai bên của hình ảnh:

img
  {
  float:left;
  clear:both;
  }

Thử ngay

Ngôn ngữ CSS

clear: none|left|right|both|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
left Không cho phép phần tử trôi ở bên trái.
right Không cho phép phần tử trôi ở bên phải.
both Không cho phép phần tử trôi ở cả hai bên.
none Giá trị mặc định. Cho phép phần tử trôi xuất hiện ở cả hai bên.
inherit Định nghĩa rằng giá trị của thuộc tính clear nên kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: no
Phiên bản: CSS1
Ngôn ngữ lập trình JavaScript: object.style.clear="left"

TIY ví dụ

Xóa phần tử bên cạnh
Ví dụ này minh họa cách sử dụng để xóa các phần tử trôi bên cạnh phần tử.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0