css里的clear_clear用法
大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说css里的clear_clear用法,希望能够帮助大家进步!!!
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>只听到从架构师办公室传来架构君的声音:
凤凰山下，恨声声玉漏、今宵易歇。有谁来对上联或下联?
今天文章到此就结束了，感谢您的阅读，Java架构师必看祝您升职加薪，年年好运。
腾讯云开发者
