clear属性值有四个clear:both|left|right|none;
作用：该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。clear:left;表示该元素左边不存在浮动元素；clear:right;表示该元素右边不存在浮动元素；clear:both;表示该元素两边都不存浮动元素；clear:none表示两边允许有浮动元素。
举例
p.f1{float:left;width :100px;}
p.f2{float:left;width :400px;}
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p >另起一行</p>以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。所以我们应改为:如果不用清除浮动，那么第3个<P>的文字就会和第一二行在一起
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p style="clear:both;">另起一行</p>
code
<html>
<head>
<meta http-equiv = "Content-Type" content ="text/html" charset = "UTF-8"/>
<title>cssclear</title>
<style type = "text/css">
p.f1{float:left;width :100px;}
p.f2{float:left;width :400px;}
</style>
</head>
<body>
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p >另起一行</p>
<p style="clear:left;">另起一行</p>
<p class="f1">这个是第4项 </p>
<p class="f2">这个是第5项 </p>
<p style="clear:both;">另起一行</p>
<p class="f2">这个是第7项 </p>
</body>
</html>
