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")的下外边界。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,841评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,415评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,904评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,051评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,055评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,255评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,729评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,377评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,517评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,420评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,467评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,144评论 3 317
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,735评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,812评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,029评论 1 256
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,528评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,126评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 想来定是我罪无可恕,才叫我一人沉沦至今。
    流华i阅读 144评论 0 1
  • 是否是这个世界上存在的生命太多才会每天都面对许多死亡的吗?我们会怎么形容一个人的死亡,也无非几种方式:自杀,他杀,...
    阮宁叙阅读 285评论 0 1
  • NSTimer的使用一般有两种:oooooo (NSTimer *)timerWithTimeInterval:(...
    阿汤8阿义阅读 411评论 5 2
  • #白马生慢,我自手书# “你前半生说的谎 到后半生就会变成满头白发 第一根是说你不会喜欢他 你不要拔下来 也不要不...
    仙女山的太阳阿阅读 1,003评论 9 56