摘要：后来终于知道是某位大神将翻译为文档流而已。。。。。。另外单纯设置效果与采用是一样的魔法堂就这个样，而浮动定位也是基于。相对定位的最强武器就是个属性了，好明显它们默认值均是。
前言
刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到Document flow(文档流)的资料。后来终于知道是某位大神将Normal flow翻译为文档流而已。。。。。。而我更偏好它的直译"常规流"，或直接引用英文名词就好了。
Normal flow到底啥意思啊？首先我们从名称入手，Normal flow直译为"常规流"，我们可以猜想它有以下几个特点：
作为默认的定位模式;
其他定位模式均以其为基础。
各位都知道与定位系统的CSS属性position:static|relative|absolute|fixed和float:none|left|right，其中position的默认值是static，而float的默认值为none。而position:static|relative均属于Normal flow。
另外单纯设置position:absolute效果与采用Normal flow是一样的（《CSS魔法堂：Absolute Positioning就这个样》），而浮动定位也是基于Normal flow。所以我认为"脱离常规流"这一说法不完全正确，甚至让人产生误解
对Normal flow的地位与和其余定位模式的关系有初步认知后，必须是迫不及待地想深入它的特性和行为特征了！这就回到那个耳熟能详的的IFC和BFC了。具体请参考CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
对于IFC和BFC已经有很多资料围绕它们来展开，而且我们也投入很多精力去理解它俩，但往往会忽略一个前提，那就是没有Normal flow就没有IFC、BFC。当我们采用绝对定位或浮动定位时，就没有必要再讨论IFC和BFC了。那么说绝对定位和浮动定位会让元素产生新的BFC又是怎么说呢？
我是这样理解的。首先绝对定位和浮动定位必须产生新的BFC，就想根元素会产生默认的BFC那样，供采用常规流的块级子孙盒子使用。但像Collapsing margins这种由BFC引起的行为特征，由于盒子本身不再受原来BFC的影响，自然就不会出现Collapsing margins了。
其实我有个疑问：那就是为什么一个文档可以有多个BFC，却只有一个IFC呢？
我想大家都试过采用这种方式实现水平居中(IE5.5下无效)
hello world:)
参与BFC的盒子独占一行，我想大家应该没有异议了，但具体是如何独占法呢？看等式吧!
"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = width of containing block
其中margin-left/width/margin-right可为auto，且具有以下规则：
若width为auto，则其他设置为auto的属性的实际值为0，并让width的实际值满足等式；
若width为数值，而margin-left/right均为auto，且除marin-left/right外其他属性值总和小于containing block的宽度，那么margin-left == margin-right == ("border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width")/2；否则margin-left == margin-right == 0.
Normal flow的小弟——Relative positioning 我们可以以Normal flow或Float定位模式作为基础之上再叠加一个相对定位，从而实现更灵活的定位操作。
相对定位的最强武器就是top/right/bottom/left4个属性了，好明显它们默认值均是auto。另外所谓基于Normal flow或Float定位模式的相对定位，自然就是以Normal flow或Float定位模式下margin box的4条边作为参考系了。
接下来只要掌握以下规则，就可以运用自如了：
left/right均为auto，则实际值为0;
left/right其中一个为数值，则两者等式left == -right;
left/right均为数值，则根据direction值。若direction为ltr，则left值保留，而right = -left；若direction为rtl，则right值保留，而left = -right。
(top/bottom规则同上)
注意：
叠加相对定位后的盒子不会影响其他盒子的排版，只是会发生重叠的效果而已;
若相对定位后的盒子超出所属containing block的范围，且overflow:auto|scroll;则会导致出现滚动条的情况，从而影响其他盒子的排版。
总结A
若有纰漏，请各位指正
尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/536...肥子John
Relative positioning
Visual formatting model details
KB010: 常规流( Normal flow )
KB009: CSS 定位体系概述
http://www.css88.com/book/css/properties...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115181.html
摘要：魔法堂重新认识和魔法堂你一定误解过的魔法堂就这个样魔法堂说说那个被埋没的志向深入细节后会发现中定位模式之间，和之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。当采用时，属性的实际值会被重置为。由于和则需要通过来引入来提供盒子定位微调的功能。 前言 对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。 《CSS...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
摘要：注意会生成新的，因此不会出现效果。图中蓝色线框，位于内，作为间的分隔线。不可否认求学之路的艰辛苦闷。如此的努力，为了仅仅是能在大学逍遥快活一番这动机实在让人心寒，也正因如此造就了大学生的堕落。人类文明进步最有力的证明。 前言 是否记得《读者文摘》中那一篇篇优美感人的文章呢？那除了文章内容外，还记得那报刊、杂志独有的多栏布局吗？ 当我们希望将报刊、杂志中的阅读体验迁移到网页上时，最简单...
摘要：更多关于的信息可参考魔法堂不得不说的因此的实际值则是相对于而言，我们可以通过来获取和的实际值。对于由于自身有固有的，因此当设置时，其实际值就是元素固有的。结果就是除均不为，而为时，会自动计算以满足等式。两条不满足外，其他情况均一致。 前言 当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却...
摘要：与的映射关系为。与根对应的对应的层叠上下文，是其他的祖先，的范围覆盖整条。注意的默认值为，自动赋值为。对于，它会将赋予给对应的，而则不会。 一、前言 假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识...
阅读 1881·2021-11-12 10:36
阅读 2313·2021-09-01 10:29
阅读 2343·2019-08-30 15:56
阅读 1020·2019-08-30 12:56
阅读 2347·2019-08-26 13:58
阅读 2267·2019-08-23 18:38
阅读 1490·2019-08-23 18:32
阅读 2105·2019-08-23 16:53
