CSS clear 属性确定元素相对于前一个浮动元素的流向。它确定元素是应显示在浮动元素的旁边还是其下方。
语法
clear: none | left | right | both | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 默认值，该元素不会被推到左或右浮动元素的下方。 |
| left | 该元素被推到左侧浮动元素的下方。 |
| right | 该元素被推到右侧浮动元素的下方。 |
| both | 该元素被推到左侧和右侧浮动元素的下方。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS Clear 属性示例
以下示例说明了具有不同值的 clear 属性。
清除 None 值的属性
要让一个元素与浮动元素一起放置，左浮动或右浮动，我们使用 none 值。如果存在空间，则元素将放置在浮动元素的旁边。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
.common {
width: 150px;
height: 100px;
text-align: center;
}
.float-left {
float: left;
background-color: lightblue;
margin-right: 10px;
}
.float-right {
float: right;
background-color: lightcoral;
}
.element {
clear: none;
background-color: lightgreen;
height: 100px;
}
</style>
</head>
<body>
<h2>CSS clear 属性</h2>
<p>
Clear：None，如果存在空格，则将元素放置在浮动元素旁边。
</p>
<div>
<div class=" common float-left">
Left Float
</div>
<div class="element">
<p>
由于使用了 none 值的clear，此元素被放置在左侧浮动元素旁边。
</p>
</div>
</div>
<br/>
<div>
<div class="common float-right">
Right Float
</div>
<div class="element">
<p>
由于使用了 none 值的clear，此元素被放置在右侧浮动元素旁边。
</p>
</div>
</div>
</body>
</html>
清除具有 left 值的属性
为了让元素被放置在 left 浮动元素的下方，我们使用 left 值。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
.float-left {
width: 150px;
height: 100px;
text-align: center;
float: left;
background-color: lightblue;
}
.element {
clear: left;
background-color: lightgreen;
height: 100px;
}
</style>
</head>
<body>
<h2>CSS clear 属性</h2>
<p>
Clear：left，它将元素放置在左浮动元素下方。
</p>
<div>
<div class="common float-left">
Left Float
</div>
<div class="element">
<p>
由于使用了带 left 值的 clear，此元素被放置在左浮动元素的下方。
</p>
</div>
</div>
<br/>
</body>
</html>
清除具有 right 值的属性
为了让一个元素被放置在一个 right 浮动元素下面，我们使用 right 值。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
.float-right {
width: 150px;
height: 100px;
text-align: center;
float: right;
background-color: lightcoral;
}
.element {
clear: right;
background-color: lightgreen;
height: 100px;
}
</style>
</head>
<body>
<h2>CSS clear 属性示例</h2>
<p>
Clear：right，它将元素放置在右侧浮动元素的下方。
</p>
<div>
<div class="common float-right">
Right Float
</div>
<div class="element">
<p>
由于使用了具有 right 值的clear，此元素被放置在右侧浮动元素的下方。
</p>
</div>
</div>
<br/>
</body>
</html>
清除具有 Both 值的属性
为了让一个元素同时放置在左右浮动元素的下方，我们使用 both 值。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
.common {
width: 150px;
height: 100px;
text-align: center;
}
.float-left {
float: left;
background-color: lightblue;
margin-right: 10px;
}
.float-right {
float: right;
background-color: lightcoral;
}
.element {
clear: both;
background-color: lightgreen;
height: 100px;
}
</style>
</head>
<body>
<h2>CSS clear 属性示例</h2>
<p>
Clear：Both，它将元素放置在左右浮动元素的下方。
</p>
<div>
<div class=" common float-left">
Left Float
</div>
<div class="common float-right">
Right Float
</div>
<div class="element">
<p>
由于使用了 clear 和 both 值，此元素被放置在左右浮动元素的下方。
</p>
</div>
</div>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| clear | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
