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")的下外邊界墩衙。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市甲抖,隨后出現(xiàn)的幾起案子漆改,更是在濱河造成了極大的恐慌,老刑警劉巖准谚,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挫剑,死亡現(xiàn)場離奇詭異,居然都是意外死亡柱衔,警方通過查閱死者的電腦和手機樊破,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唆铐,“玉大人哲戚,你說我怎么就攤上這事“瘢” “怎么了顺少?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我脆炎,道長梅猿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任腕窥,我火速辦了婚禮粒没,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘簇爆。我一直安慰自己,他們只是感情好爽撒,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布入蛆。 她就那樣靜靜地躺著,像睡著了一般硕勿。 火紅的嫁衣襯著肌膚如雪哨毁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天源武,我揣著相機與錄音扼褪,去河邊找鬼。 笑死粱栖,一個胖子當著我的面吹牛话浇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播闹究,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼幔崖,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了渣淤?” 一聲冷哼從身側(cè)響起赏寇,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎价认,沒想到半個月后嗅定,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡用踩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年渠退,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捶箱。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡智什,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出丁屎,到底是詐尸還是另有隱情荠锭,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布晨川,位于F島的核電站证九,受9級特大地震影響删豺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜愧怜,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一呀页、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拥坛,春花似錦蓬蝶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至著摔,卻和暖如春缓窜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背谍咆。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工禾锤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人摹察。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓恩掷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親港粱。 傳聞我的和親對象是個殘疾皇子螃成,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容

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