Trần Ngọc Thanh - 459
- 16/07/2025
Trần Ngọc Thanh 
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
