clear属性用来指定的浮动元件不允许浮动该哪一侧；它设置或返回元素相对于浮动对象的位置。而"clear: both"用于设置在左右两侧均不允许浮动元素。
当不需要与指定元素相关的任何元素在左右浮动，并且仅在下面显示时，就可以使用该"clear: both"规则。该规则还表明没有其他元素占用左右两边的空间。
语法：
clear:both;示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width:100px;
height:100px;
background-color:green;
color:white;
font-weight:bold;
font-size:25px;
text-align:center;
float: left;
padding:15px;
}
p.demo {
clear: both;
}
h1 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>clear:both;</h1>
<div><pre>Hello</pre></div>
<p>这是一个测试文字！这是一个测试文字！这是一个测试文字！这是一个测试文字！这是一个测试文字！这是一个测试文字！</p>
<p class="demo">这是一个测试文字！</P>
</body>
</html>效果图：
浏览器支持：
● Google Chrome
● Internet Explorer
● Firefox
● Opera
● Safari
推荐阅读：
9322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
