技术频道


CSS float

Float 属性


float 的属性值有 noneleftright,有几个要点:

  1. 只有横向浮动,并没有纵向浮动。
  2. 当元素应用了 float 属性后,将会脱离普通流,其容器(父)元素将得不到脱离普通流的子元素高度
  3. 一个元素会围绕着浮动元素(典型运用是文字围绕图片),与应用了 position 的元素相比浮动元素并不会遮盖后一个元素。
  4. 浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示,必须让两个块状元素都应用 float)。
  5. 会将元素的 display 属性变更为 block

与 position 的兼容性问题


元素同时应用了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 元素的。

CSS 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)

CSS float 扩展阅读:




发表评论