clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.d1{
float:left;
border:3px solid green;
width:200px;
height:80px;
margin:10px;
}
.d2{
border:1px solid red;
width:600px;
}
.d3{
float:left;
border:3px solid green;
width:200px;
height:80px;
margin:10px;
}
.d4{
width:600px;
border:1px solid red;
clear:left;
}
</style>
</head>
<body>
<h1>不使用 clear</h1>
<div class="d1">div1</div>
<div class="d2">div2-请注意，在HTML代码中div2在div1之后。不过，由于div1向左浮动，div2中的文本会流动到div1周围。</div>
<br><br>
<h1>使用 clear</h1>
<div class="d3">div3</div>
<div class="d4">div4-在此处，clear:left;把div4移动到浮动的div3下方。值"left"会清除向左浮动的元素。您也可以清除"right"和"both"</div>
</body>
</html>
运行效果：
评论