Thuộc tính clear dùng để lấy hoặc thiết lập vị trí của phần tử nổi (floating element). Chỉ định xem phần tử có được đẩy xuống dưới phần tử nổi khác hay không.
Cú pháp
object.style.clear = 'none|left|right|both|initial|inherit'
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| left | Không cho nổi bên trái |
| right | Không cho nổi bên phải |
| both | Không cho nổi cả hai bên |
| none | Cho nổi cả hai bên (mặc định) |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 5px;
float: right;
clear: both;
border: 2px solid orange;
}
#DIV1 { clear: left; }
</style>
<script>
function changeClear() {
document.getElementById("DIV1").style.clear = "right";
document.getElementById("Sample").innerHTML = "Thuộc tính clear của div đã thay đổi từ left sang right";
}
</script>
</head>
<body>
<img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg">
<div id="DIV1">Đây là văn bản mẫu bên trong div. Dòng khác trong div. Văn bản tiếng Anh ngẫu nhiên. Div này minh họa thuộc tính clear</div>
<p>Thay đổi clear property của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeClear()">Thay đổi Clear</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu div có clear: left (xuống dòng tránh ảnh float right bên trái). Sau khi nhấn nút, chuyển thành clear: right (xuống dòng tránh ảnh float right bên phải).
Ứng dụng: Dùng clear để ngăn chặn nội dung bao quanh ảnh float, tạo layout sạch sẽ.