W3C CSS2.1 float rules

W3C关于float属性文档

This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

可以给任何元素设置,但只会应用于生成了非绝对定位盒(的元素)

Here are the precise rules that govern the behavior of floats:

  1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

1.一个左浮动盒的left外边(outer edge)不能位于其包含块的left边的左边。向右浮动的元素也有类似的规则

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

2.如果当前盒是向左浮动的,并且在这之前源文档中还有元素生成了左浮动盒,那么对于每一个之前的盒,要么当前盒的left外边在之前的盒的right外边的右边,要么它的top要比之前的盒的bottom低。右浮动盒也有类似的规则

The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.

3.一个左浮动盒的right外边不能位于接着它的任意右浮动盒的left外边的右边。右浮动盒也有类似的规则

A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.

4.一个浮动盒的外top(outer top)不能高于其包含块的top。当浮动(盒)出现在两个合并的margin之间时,浮动(盒)的定位就像它有一个空的匿名块父级存在于(当前)流一样。

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

5.一个浮动盒的外top不能高于源文档中任何在此之前的元素生成的块盒或者浮动盒的外top

The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

6.一个元素的浮动盒的外top不能高于任何含有源文档中在此之前的元素生成的盒的行盒的top

A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

7.浮动框不能因同方向浮动元素而在非浮动方向上溢出包含块
左边存在另一个左浮动盒的左浮动盒的right外边不能位于其包含块的right边的右边(不严谨的:一个左浮动盒不能超出right边,除非它已经尽量向左(紧挨着包含块的left边)了)。右浮动元素也有类似的规则

A floating box must be placed as high as possible.

8.浮动盒必须尽可能向上放置(注意在前面关于其顶边规则的限制下,满足此条)

A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

9.左浮动框必须尽量靠左放置,右浮动框必须尽量靠右放置。在更高的位置和更靠左或靠右的位置,选择前者。

But in CSS 2.1, if, within the block formatting context, there is an in-flow negative vertical margin such that the float's position is above the position it would be at were all such negative margins set to zero, the position of the float is undefined.
References to other elements in these rules refer only to other elements in the same block formatting context as the float. 1

但在CSS 2.1中,如果块格式化上下文里有一个流内负竖直margin,导致浮动(盒)的位置在原位置(假设该负margin被设置为0)的上方,浮动(盒)的位置是未定义的。
这些规则里涉及的其它元素仅仅是指与浮动(盒)处于同一个块格式化上下文的其它元素
10.对于 ‘clear’ 特性值不是 ‘none’ 的浮动框,其上外边界( top margin edge )必须低于前面所有左浮动框(’clear’ 特性值为 "left" 时),或者右浮动框("clear:right"),或者左右浮动框("clear:both")的下外边界。

你可能感兴趣的:(W3C CSS2.1 float rules)