float, clear

float : none | left | right

取值：

none	:	默认值。对象不飘浮
left	:	文本流向对象的右边
right	:	文本流向对象的左边

说明：

该属性的值指出了对象是否及如何浮动。请参阅 clear 属性。
当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。
跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。
在IE5+中， div 和 span 对象假如没有指定宽度会被分配默认的宽度，而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 styleFloat 。

 

 

 

 

 

语法：

clear : none | left | right | both

取值：

none	:	默认值。允许两边都可以有浮动对象
left	:	不允许左边有浮动对象
right	:	不允许右边有浮动对象
both	:	不允许有浮动对象

 

说明：

该属性的值指出了不允许有浮动对象的边。请参阅 float 属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 clear 。

网友分享:

clear:both;
CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

例子：

<p style="float:left;width :100px;">这个是第1列，</p>
<p style="float:left;width :400px;">这个是第2列，</p>
<p >这个是列的下面。</p>

如果不用清除浮动，那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个这利加一个清除浮动。
<p style="float:left;width :100px;">这个是第1列，</p>
<p style="float:left;width :400px;">这个是第2列，</p>
<p clear:both;>这个是列的下面。</p>