CSS3 深入理解clear属性

clear属性值有四个

clear:both|        left|         right|        none;

clear属性的作用就是“清除”浮动。如果某元素设置clear:left;表示该元素左边不存在浮动元素相应的，

clear:right;表示该元素右边不存在浮动元素；clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。(默认)

在视觉上要使某元素左边或右边不存在浮动元素,就只有它往下移一行，或浮动元素往下移一行。

（这个元素肯定是不能将浮动元素清除的了,只是用这样的方式达到页面布局的效果而已）

为了方便我使用了行内样式：

<p style="height:30px;background-Color:red;float:left;width :150px;">这个是第1列，</p>
<p style="height:30px;background-color:green;float:left;width :200px;">这个是第2列，</p>
<p style="line-height:100px;height:100px;background-color:yellow;width:300px;padding-left:0px;">
<span style="background-color:red;">这个是列的下面。</span>
</p>

1,设置宽度 第一个p标签150px，第二个200px,第三个300px;

可以看到未设置clear时且设置的宽度不够包含浮动元素会把标准流里面的元素挤出到第二行，这时设置的line-height:无效。

2,设置宽度 第一个p标签150px，第二个200px,第三个400px;

可以看到未设置clear时且设置的宽度不够包含浮动元素和内部元素会把标准流里面的元素挤出到第二行，这时设置的line-height:无效。

3,设置宽度 第一个p标签150px，第二个200px,第三个500px;

可以看到未设置clear时且设置的宽度包含浮动元素和内部元素，这时设置的line-height:有效。

4,设置clear属性

可以看到设置clear时:both,直接换行。相当于不会与浮动元素重叠。

5,浮动元素设置clear属性和标准流一样会换行

<p style="height:30px;background-Color:red;float:left;width :150px;">这个是第1列，</p>
<p style="clear:both;height:30px;background-color:green;float:left;width :200px;">这个是第2列，</p>
<p style="clear:both;line-height:100px;height:100px;background-color:yellow;width:400px;padding-left:0px;">
  <span style="background-color:red;">这个是列的下面。</span>
</p>

6，clear:right不起作用

<p style="height:30px;background-Color:red;float:left;width :150px;">这个是第1列，</p>
<p style="clear:right;height:30px;background-color:green;float:left;width :200px;">这个是第2列，</p>
<p style="height:30px;background-color:green;float:left;width :200px;">这个是第3列，</p>

以上代码尽管第二个p有clear:right代码，但是它的右侧还是出现了浮动元素。这主要代码是顺序执行的，当执行到第二个div要清除右浮动的时候，第三个p并没有被加载，所以它的清除效果也就无效了，于是第三个p依然会紧跟着第二个p。

那么clear:right,有什么用呢？        ***当float:right时clear：right,就有作用了。此时clear：left,不起做用。***

7,clear:bothmargin-top:失效---垂直方向,marin-left:仍然有效---水平方向:

<p style="height:30px;background-Color:red;float:left;width :150px;">这个是第1列，</p>
<p style="clear:both;height:30px;background-color:green;width :200px;">这个是第2列，</p>

转发著明出处。