float中文翻译为浮动,很形象的翻译,在CSS很常用,当你需要吧两个块级元素定排放在同一高度上经常会用到float,先看一下float的 属性。
先看一下float可能的值:
float:left-元素向左浮动
float:right-元素向右浮动
float:none-不浮动
float:inherit-从父类的float属性继承
既然说道浮动,那么就有必要提一下浮动的清理,因为如果一个元素的float一旦被设定后将影响其左右的元素。当我们不需要浮动时应该即时清理。清 理浮动使用clear。clear的属性和float相当,只是多了一个属性
clear:left/right/inherit/none (清理浮动、不浮动、以及继承清理的属性)
clear:both-清理所有浮动
上面,简单的对浮动与清理浮动做了一个解释,浮动在实际应用种是非常广泛的,但也有很多地方不应该使用float,或者我们有更好的方法来解决。看 那些地方我们有更好的办法来解决。
1、无序链接,经常可以看到一些网站的关键字链接,或者产品关键字,已经分类等部分会用到比 较短的链接混乱排列,有些人使用<ul><li>配合float来做链接,我想这个是完全没有必要的,你可以设 定<li>标签的display:inline,吧<li>设定为线级元素来达到混排的效果,不需要使用float。甚至这样的 链接完全可以由<p><a>这样的标签来代替,岂不是更简洁?
2、我们在做一个区块的时候经常使要用more(更多)来链接相关的页面,这样的标题栏往往左边是标题,右边为more链接,很多人喜欢用 float来做,这样在float之后还要多一个标签来clear,感觉很繁琐,甚至更有人用整张图片配合热点来做,我觉的这些都不是很好的办法。其实像 这种效果完全可以用定位来做,设定title的position:relative。然后定义more这个标签的right:0或者不需要那么右,你可以 详细设定它的位置。这样省去了float以及clear,结构也更清晰了。
3、多列不规则布局,我们经常要用到3列布局,这种布局由于规则,但是为了美观,我们必须定义3列的总宽度,但是根据CSS中浮动的总宽必 须<99%的父标签宽度,否则经常会在某些浏览器下面出错,但是99%的宽在宽屏显示器下面很明显会出现10px以上的错位,所以这是一个很郁闷的 问题,其实在碰到这类问题时我们应该有限使用position定位来解决问题,而不是浮动,这个问题在这里就不多说了,下面会有一篇关于定位的详细文章。
总结一下,CSS下面的浮动,虽然很是常用,但是我们要坚持几条原则,能有更好的解决办法(display,position)的时候我们坚决使用 float,同一高度的浮动总宽度(包括margin,padding)应该小于等于(<)父元素的宽度,记住是小于,而不是等于,如果是等于可能 你会在别的浏览器上看到你不想看到的结果。