关于css中float的用法整理及清除浮动方法。

在css中，float这一属性有着非常重要的作用，在一般的布局中，会有诸如按照一定要求让文字环绕，或者图片环绕等说法。float的作用就类似于它。设置一个元素浮动方法如下：

#setFloat{float:left;}

其中float有4种属性，分别为：

left:靠左边浮动。

right:靠右边浮动。

none:不浮动。

inherit:继承父级元素的浮动属性。

浮动的用法有很多，例如最常见的让多个div显示到同一行：

 
 
<div class="div0"> 
    <div class="divleft">第一个div</div> 
    <div class="divleft">第二个div</div> 
    <div class="divleft">第三个div</div> 
</div>  

其中divleft的css文件为:

.divleft{float:left;  width:50px; margin-left:50px;}

这样就可以让在div0中的3个div在同一行显示。

但在使用float的时候一定要注意一个问题，当前一行设置好float属性时，对后面的代码仍然有效果，后面的元素会跟随着浮动到上一个元素的边界，这也是曾经困扰我很长一段时间的问题。因此我们在设置完浮动之后，没有特殊情况，一般对其float进行清除，具体代码为：

.clearfloat{clear:both;}

其中clear也有left,right等不同属性，比较常用的就是both。但一些特殊情况也会用到单边的清除。

这种清除可以通过加入一个空的div来实现：

<div class="clearfloat"></div>