使用 CSS 的 Clear 属性关闭浮动

cssweb developmentfront end technology更新于 2025/7/25 9:48:17

我们可以使用 CSS 的 Clear 属性来指定浮动元素中需要清除流动内容的一侧。

示例

让我们看一个 CSS Clear 属性的示例 −

<!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 clear 属性的例子 −

<!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>