Chúng tôi có thể sử dụng thuộc tính rõ ràng CSS để chỉ định một bên của phần tử nổi sẽ được xóa khỏi nội dung đang chạy.
Ví dụ
Hãy xem một ví dụ về thuộc tính rõ ràng CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
.clear {
clear: left;
}
.yellow{
background-color: #FF8A00;
}
.red{
background-color: #F44336;
}
.green{
background-color: #4CAF50;
}
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
}
</style></head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
Hãy xem một ví dụ khác về thuộc tính rõ ràng CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
</style></head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
