数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用 CSS 的 clear 属性关闭浮动
我们可以使用 CSS clear 属性来指定浮动元素的哪一侧需要清除浮动内容。如果您想控制浮动元素旁边的元素，则可以使用 clear 属性。
语法
以下是 float 属性的语法：
clear: value;
其值可以是：
none − 元素不会设置在左侧或右侧浮动元素的下方。默认值。
left − 元素设置在左侧浮动元素的下方
right − 元素设置在右侧浮动元素的下方
both − 元素设置在左侧和右侧浮动元素的下方
示例
让我们来看一个 CSS clear 属性的示例。首先，设置要对齐的元素：
<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>
使用 float 属性将所有 <p> 元素浮动到左侧：
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
}
第二个 <p> 元素设置了 clear 属性：
<p class="clear red">Important Notice</p>
这将清除：
.clear {
clear: left;
}
让我们来看这个例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style>
.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 属性的示例。首先，设置 <p> 元素：
<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>
对于所有 <p> 元素，float 属性都设置为 left 值：
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
对于第二个 <p> 元素，将 clear 属性设置为 both，并将 float 属性设置为 none：float: none 将不允许元素浮动：
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
这是示例：
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style>
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>
更新于：2024年1月2日
2K+ 次浏览
广告