在css中,float这一属性有着非常重要的作用,在一般的布局中,会有诸如按照一定要求让文字环绕,或者图片环绕等说法。float的作用就类似于它。设置一个元素浮动方法如下:
#setFloat{float:left;}
其中float有4种属性,分别为:
left:靠左边浮动。
right:靠右边浮动。
none:不浮动。
inherit:继承父级元素的浮动属性。
浮动的用法有很多,例如最常见的让多个div显示到同一行:
其中divleft的css文件为:
- <div class="div0">
- <div class="divleft">第一个div</div>
- <div class="divleft">第二个div</div>
- <div class="divleft">第三个div</div>
- </div>
.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>