float
。Float 可用于实现文字环绕图片,以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
float 的属性值有 none
、left
、right
,有几个要点:
block
元素同时应用了position: relative、float、[top | left | bottom | right] 属性后,则元素先浮动到相应的位置,然后再根据 top | left | bottom | right 所设置的距离来发生偏移。
如果你不将 float 的元素的 position 设置成 relative 的话,你想通过设置 float 元素的 z-index
来的达到覆盖 position:absolute 是无效的。
同理,float 元素下面存在 position: absolute 的子元素,如果你不将 float 的元素的 position 设置成 relative
的话,absolute 元素是不会定位到 float 元素的。
img { float: right; margin: 0 0 1em 1em; }
CSS float 实例效果如下:
When referring to the css property 'float', from javascript you have to use the variable name 'cssFloat'. Whereas other css properties are referred to by their normal name (or the margin-left -> marginLeft sort of thing). Why is cssFloat different?
JavaScript steals much of its syntax and some of builtin functionality from Java. One of the things stolen from Java was its set of key and reserved words. float in Java specifies a floating-point value type, and it was left reserved in JavaScript as a result, so you couldn't use it as a property name without using e.style["float"]. I refer to JS here because it's most relevant to web developers, but the relevant DOM specs aren't JS-specific and could be implemented for other languages, too, so "float" was ruled out for their sakes as well. --Waldo 23:48, 2 January 2008 (PST)