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:
- 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邊的左邊。向右浮動的元素也有類似的規(guī)則
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低蜂绎。右浮動盒也有類似的規(guī)則
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外邊的右邊轮听。右浮動盒也有類似的規(guī)則
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。當浮動(盒)出現(xiàn)在兩個合并的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邊的右邊(不嚴謹?shù)模阂粋€左浮動盒不能超出right邊,除非它已經(jīng)盡量向左(緊挨著包含塊的left邊)了)端逼。右浮動元素也有類似的規(guī)則
A floating box must be placed as high as possible.
8.浮動盒必須盡可能向上放置(注意在前面關于其頂邊規(guī)則的限制下朗兵,滿足此條)
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中玫膀,如果塊格式化上下文里有一個流內(nèi)負豎直margin掀序,導致浮動(盒)的位置在原位置(假設該負margin被設置為0)的上方,浮動(盒)的位置是未定義的救氯。
這些規(guī)則里涉及的其它元素僅僅是指與浮動(盒)處于同一個塊格式化上下文的其它元素
10.對于 ‘clear’ 特性值不是 ‘none’ 的浮動框找田,其上外邊界( top margin edge )必須低于前面所有左浮動框(’clear’ 特性值為 "left" 時),或者右浮動框("clear:right")着憨,或者左右浮動框("clear:both")的下外邊界墩衙。