เราสามารถใช้คุณสมบัติ CSS clear เพื่อระบุด้านขององค์ประกอบ float ซึ่งจะถูกล้างจากเนื้อหาที่ไหลลื่น
ตัวอย่าง
มาดูตัวอย่างคุณสมบัติ 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
มาดูตัวอย่างอื่นของคุณสมบัติ 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
