什么是文档流（） csshtml布局

今天解析来自John Rosato的一篇文章“What is document flow?”，什么是文档流？
开头是摘要：

文章图片

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。

简单点说，就是 document flow 指示了页面上的元素如何去排列。
接着，讲到了 document flow 的三种影响元素位置的方法：

文章图片

显示类型

Float

定位

显示类型那么，第一种就是显示类型

文章图片

【什么是文档流（）】HTML 元素最初按其显示类型定位。这种显示类型决定了其他元素是否能够位于它们旁边，以及填充、边距和其他 CSS 属性如何影响它。两种最重要的显示类型是：

块级

内联

老生常谈的block和inline，这里不再展开，可参考鹏哥儿写的一篇总结性文章：inline, block, inline-block区别 [2]
Float 接下来就是float

文章图片

一个float是在当前行向左或向右移动的框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可能沿其一侧流动（或被“清除”属性禁止这样做）。内容从左侧浮动框的右侧向下流动，并从右侧浮动框的左侧向下流动。 — W3规范

Float不太好翻译，第一句开头的float是名词形式，还是称为“浮动框”更贴切一点！

文章图片

浮动框是一种CSS属性，它允许你应用在一个块级元素上，可以把这个块级元素推到父类块的左边界或者右边界。这非常有用，因为它允许你去使用块级元素所提供的所有好处，同时又能摆脱无法放置每个块级元素在同一水平线上的主要限制。然鹅，使用浮动框需要权衡取舍。

对于还未出现flex、grid布局时，想要把多个块级元素放在同一行，除了用table，就是使用这个float了。

文章图片

浮动元素离开了正常的文档流。一个周知的问题是当多个子元素都为浮动时，造成父类块高度的丢失。正常来说，一个父类块的高度和宽度会拉伸去适应内容，然鹅浮动的内容不在这种情况中。父类容器的高度和宽度不会被浮动元素所修改。谢天谢地，这个臭名昭著的问题还很多解决方案，比如clearfix。你可以在这里读到更多关于clearfix。大量的网格系统使用float来设计，它确实是一个网站的架构骨干。

关于clearfix，本质上也是利用BFC[3]。
定位

文章图片

这里有几个可以应该在元素上的定位值。应该在所有元素上的初始值是static，一个在“在流”类型，我们将在之后谈到。

文章图片

定位值：

值：static | relative | absolute | fixed | inherit

初始值：static

定位偏移属性

属性：top | right | bottom | left

这里有两组定位属性

在流

脱流

在流

文章图片

这里有两种在流定位值，他们分别是static和relative

文章图片

static在之前有提到，元素默认使用在流值static。这意味这他们正常表现，作为每一个元素的表现类型布局。他们同样不能与脱流元素相互作用。

文章图片

relative定位和static非常相似，当主要是不同是他们能够和脱流元素交流。一个relative元素可以用作脱流子元素的容器。脱流定位元素会遵循relative元素的边界。很酷对吧？relative定位元素，不像static，同样可以使用定位偏移属性来去移动它。当使用这些属性时，relative定位元素盒会仍然占据它原有的定位，但是内容会变为脱流。

脱流

文章图片

这里有两种脱流定位属性，他们是absolute和fixed。

文章图片

在absolute定位模型中，一个盒子完全从正常文档流中移除（它不会影响后面的兄弟元素）并且分配一个相对包含块的定位。— W3规范

文章图片

absolute定位元素带来了层级的概念。想象一下元素只是页面上不同的小纸片而已，你可以堆叠这些页面小纸片在彼此的顶部，这样一张小纸片会叠加在另外一张小纸片上面。W3规范同样提到它遵守一个包含块。这个包含块不是它的直接父块。在之前提到的，所有HTML元素都是static定位，不会影响脱流的元素。默认地，这个包含快是body标签。如果你希望去创建一个HTML元素包含块，那么它应该是一个除了static之外的任意一个定位元素（fixed, relative, 或者absolute）。

这里多次提到包含块(Containing Block)，可以参考鹏哥儿写的文章：[习以为常的CSS包含块]() [4]

文章图片

fixed定位是absolute定位的子类。唯一的区别是对于一个fixed定位块，包含块是通过窗口所创建。 — W3规范

文章图片

相当直接，这个窗口就是浏览器窗口。就是说，不像绝对定位元素，一个fixed定位元素不会遵循任何带有fixed/absolute/relative定位的父容器。它唯一遵循的父类块就是浏览器它本身。当你想要让一些东西常驻页面的时候，这非常有用，因为当你滚动的时候，所有fixed定位的元素会驻留在页面上。

总结

文章图片

至此我们圆满完成了文档模型的解释！这篇博文会一如既往得被调整，去包含有用信息的图片、例子和一些练习（当我有空的时候）。

总的来说，这篇文章比较干，没有代码和实例，John Rosato 主要对文档流做了一个概念性的总结，文档流其实就是对元素的定位，文档流一共分为四种：

正常文档流 normal document flow
显示类型 display type
浮动框 float
定位 position

理解以上几种文档流后，我们对浏览器如何对各个元素排兵布阵有了更加宏观性地了解，可以关注个人公众号【鹏哥儿的Echo】，学习更多。
REFERENCE [1] https://soulandwolf.com.au/bl...
[2] inline, block, inline-block区别 : https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484012&idx=1&sn=cbeb9cb9385bd364ebfc38feaf55a41f&chksm=cf525a1df825d30bce67e954886a73b23c99a2504e93130a473877117e9c8eab460cce6f4eb5&token=666331130&lang=zh_CN#rd
[3] CSS中的FC到BFC： https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484298&idx=1&sn=1c55ab955db816ff2372020e0667c942&chksm=cf525bfbf825d2edc4262ca7b9a6f74b09877722574ca43824188098a8f4c0bcbde379ce7fce&token=32773786&lang=zh_CN#rd
[4] 习以为常的CSS包含块 : https://mp.weixin.qq.com/s?__biz=Mzg4MjY3NTk5OA==&mid=2247484111&idx=1&sn=28ee87a886b7fda75fffa633f6d5997b&chksm=cf525abef825d3a840e8ab20ef05464490d3aec985d8d414a5ef21393bb9ee861992c4d9c637&token=32773786&lang=zh_CN#rd