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邊的左邊。向右浮動的元素也有類似的規(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")的下外邊界。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,200評論 1 92
  • 想來定是我罪無可恕,才叫我一人沉淪至今。
    流華i閱讀 164評論 0 1
  • 是否是這個世界上存在的生命太多才會每天都面對許多死亡的嗎?我們會怎么形容一個人的死亡,也無非幾種方式:自殺,他殺,...
    阮寧敘閱讀 346評論 0 1
  • NSTimer的使用一般有兩種:oooooo (NSTimer *)timerWithTimeInterval:(...
    阿湯8阿義閱讀 448評論 5 2
  • #白馬生慢,我自手書# “你前半生說的謊 到后半生就會變成滿頭白發(fā) 第一根是說你不會喜歡他 你不要拔下來 也不要不...
    仙女山的太陽阿閱讀 1,103評論 9 56

友情鏈接更多精彩內(nèi)容