clear
属性被用于控制浮动。比较下面两个例子:
这是没有clear的实例:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
float:left;
width:200px;
height:100px;
margin:1em;
border:4px solid #6ac5ac;
}
section {
border:4px solid #fdc72f;
}
</style>
</head>
<body>
<div class="box">我感觉好像我在漂浮!</div>
<section>在这个例子中, section 元素实际上是在 div 之后的(译注:DOM结构上)。然而 div 元素是浮动到左边的,于是 section 中的文字就围绕了 div ,并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢?</section>
</body>
</html>
效果图如下:
在这个例子中, section
元素实际上是在 div
之后的(译注:DOM结构上)。然而 div
元素是浮动到左边的,于是 section
中的文字就围绕了 div
,并且 section
元素包围了整个元素。如果我们想让 section
显示在浮动元素之后呢?
再看下面的例子,这是有clear的例子,控制了浮动。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
float:left;
width:200px;
height:100px;
margin:1em;
background-color:#6ac5ac;
}
.after_box {
clear:left;
background-color:#fdc72f;
}
</style>
</head>
<body>
<div class="box">
我感觉我好像在漂浮!
</div>
<section class="after_box">
使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
</section>
</body>
</html>
效果图如下:
使用 clear
我们就可以将这个段落移动到浮动元素 div
下面。你需要用 left
值才能清除元素的向左浮动。你还可以用 right
或 both
来清除向右浮动或同时清除向左向右浮动。