Thuộc tính clear trong CSS
Trần Thị Vân - 1185
- 16/07/2025
Chức năng của Thuộc tính clear trong CSS
Thuộc tính clear trong CSS dùng để quy định cách một phần tử HTML nằm cùng trên một hàng với các phần tử HTML khác, có thể nằm cùng hàng hoặc dành hết một hàng, nó phụ thuộc vào giá trị clear và giá trị float trên các phần tử HTML.
Cú pháp của Thuộc tính clear trong CSS
clear:giatri;
giatri: Giá trị quy định cách một phần tử HTML nằm cùng trên một hàng với các phần tử HTML khác, có thể nằm cùng hàng hoặc dành hết một hàng (right, left, both)
Các giá trị của Thuộc tính clear trong CSS
right: Quy định thẻ HTML không được nằm cạnh phải hoặc bên trái thẻ HTML có float:right.
left: Quy định thẻ HTML không được nằm cạnh trái hoặc bên phải thẻ HTML có float:left.
both: Khiến thẻ HTML dành hết một hàng và không nằm chung với bất kỳ thẻ HTML nào, điều kiện là thẻ HTML này không kết hợp với thuộc tính float nào.
Code Thuộc tính clear trong CSS
Css Clear right
clear:right; Giá trị right trong Clear sẽ quy định thẻ HTML không được nằm cạnh phải hoặc bên trái thẻ HTML có float:right.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css Clear right</title>
<style>
div {width:100px;height:100px;background:red;}
</style>
</head>
<body>
<h1>Chạy thử Css Clear right</h1>
<p>Giá trị right trong Clear sẽ quy định thẻ HTML không được nằm cạnh phải hoặc bên trái thẻ HTML có float:right:</p>
<div style="float:left">float:left</div>
<p style="clear:right">clear:right; Giá trị right trong Clear sẽ quy định thẻ HTML không được nằm cạnh phải hoặc bên trái thẻ HTML có float:right.</p>
<div style="float:right">float:right</div>
</body>
</html>
Css Clear left
clear:left; Giá trị left trong Clear sẽ quy định thẻ HTML không được nằm cạnh trái hoặc bên phải thẻ HTML có float:left.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css Clear left</title>
<style>
div {width:100px;height:100px;background:red;}
</style>
</head>
<body>
<h1>Chạy thử Css Clear left</h1>
<p>Giá trị left trong Clear sẽ quy định thẻ HTML không được nằm cạnh trái hoặc bên phải thẻ HTML có float:left:</p>
<div style="float:left">float:left</div>
<p style="clear:left">clear:left; Giá trị left trong Clear sẽ quy định thẻ HTML không được nằm cạnh trái hoặc bên phải thẻ HTML có float:left.</p>
<div style="float:right">float:right</div>
</body>
</html>
Css Clear both
clear:both; Css Clear both khiến thẻ HTML dành hết một hàng và không nằm chung với bất kỳ thẻ HTML nào, điều kiện là thẻ HTML này không kết hợp với thuộc tính float nào.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css Clear both</title>
<style>
div {width:100px;height:100px;background:red;}
</style>
</head>
<body>
<h1>Chạy thử Css Clear both</h1>
<p>Css Clear both khiến thẻ HTML dành hết một hàng và không nằm chung với bất kỳ thẻ HTML nào, điều kiện là thẻ HTML này không kết hợp với thuộc tính float nào:</p>
<div style="float:left">float:left</div>
<p style="clear:both">clear:both; Css Clear both khiến thẻ HTML dành hết một hàng và không nằm chung với bất kỳ thẻ HTML nào, điều kiện là thẻ HTML này không kết hợp với thuộc tính float nào.</p>
<div style="float:right">float:right</div>
</body>
</html>
Khi nào nên sử dụng thuộc tính clear trong CSS?
Thuộc tính clear nên được sử dụng khi một phần tử cần thoát khỏi ảnh hưởng của các phần tử đang dùng float. Đây là cách đơn giản để kiểm soát vị trí hiển thị, đặc biệt khi một khối nội dung mới không nên nằm cạnh hình ảnh hoặc cột đã được đẩy sang trái, phải.
Xử lý phần tử bị ảnh hưởng bởi float
Khi phần tử phía trước sử dụng float, phần tử tiếp theo có thể tự động chạy lên khoảng trống còn lại. Nếu muốn phần tử đó bắt đầu từ một dòng mới, có thể dùng clear để loại bỏ ảnh hưởng của hướng float tương ứng.
Ví dụ, nếu một hình ảnh được đẩy sang trái và đoạn nội dung phía sau không được phép nằm bên cạnh hình ảnh, có thể thiết lập clear: left cho phần tử cần tách khỏi vùng float.
.noi-dung-moi {
clear: left;
}
Cách này đặc biệt hữu ích khi bố cục được xây dựng bằng float, chẳng hạn như hình ảnh đi kèm nội dung, các khối thông tin hoặc những thành phần được sắp xếp theo chiều ngang.
Ngăn nội dung bị đẩy lên cạnh phần tử float
Không phải lúc nào việc phần tử mới nằm cạnh phần tử float cũng là kết quả mong muốn. Với những nội dung cần bắt đầu một khu vực mới, clear giúp giữ chúng ở bên dưới vùng float thay vì tiếp tục chiếm khoảng trống bên cạnh.
Chẳng hạn, khi phần trước sử dụng float: right, có thể dùng clear: right cho phần tử tiếp theo:
.phan-tiep-theo {
clear: right;
}
Nếu phần tử có thể bị ảnh hưởng bởi cả float bên trái và bên phải, clear: both là lựa chọn phù hợp. Nhờ đó, phần tử sẽ không tiếp tục nằm cạnh các phần tử đang float theo một trong hai hướng.
Những lưu ý khi kết hợp clear với float
clear chỉ thực sự có ý nghĩa khi trong bố cục có phần tử sử dụng float. Vì vậy, trước khi thêm thuộc tính này, nên xác định rõ phần tử nào đang tạo ra ảnh hưởng đến vị trí của nội dung phía sau.
Cũng không nên mặc định sử dụng clear: both cho mọi trường hợp. Nếu chỉ cần thoát khỏi float bên trái hoặc bên phải, dùng đúng hướng sẽ giúp CSS rõ ràng và dễ kiểm soát hơn.
Đối với bố cục hiện đại, Flexbox và CSS Grid thường phù hợp hơn cho việc sắp xếp các khối theo hàng hoặc cột. Tuy nhiên, khi làm việc với cấu trúc cũ hoặc cần kiểm soát nội dung xung quanh phần tử float, clear vẫn là thuộc tính quan trọng cần hiểu rõ.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính clear trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
