您的位置：首页 > Web前端 > CSS

css clear用法

2015-05-31 17:29 507 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航