今天来分析一篇《什么是文档流？来自约翰·罗萨托。什么是文档流？首先总结一下：文档流是由CSS定位语句定义的页面元素的排列，以及HTML元素的顺序。也就是说，每个元素如何占据空间以及其他元素如何相应地定位自己。简单来说，文档流表示页面上的元素是如何排列的。然后，讲了三种影响元素位置的文档流方法：显示类型Float定位显示类型然后，第一个是显示类型HTML元素最初是根据其显示类型来定位的。这种显示类型决定其他元素是否可以放置在它们旁边，以及填充、边距和其他CSS属性如何影响它。最主要的两种显示类型是：block-levelinlineblock和inline，比较常见，这里不展开。可以参考彭哥儿写的一篇总结文章：inline、block、inline-block的区别[2]floatconnectionDown是float。浮动是在当前行上向左或向右移动的框。浮动（或“浮动”或“浮动”框）最有趣的特性是内容可以沿着它的侧面流动（或者通过“清除”属性阻止这样做）。内容在左侧浮动框的右侧向下流动，在右侧浮动框的左侧向下流动。—W3规范Float不容易翻译。第一句开头的float到底是名词形式呢，还是叫它“漂浮的盒子”更合适呢！浮动框是一种CSS属性，允许您将其应用于块级元素，将块级元素推到父块的左边界或右边界。这非常有用，因为它允许您使用块级元素必须提供的所有好处，同时摆脱无法将每个块级元素放在同一水平线上的主要限制。但是，使用浮动框需要权衡取舍。在flex和grid布局还没有出现的时候，如果想把多个块级元素放在同一行，可以用这个float代替table。浮动元素离开正常的文档流。一个已知的问题是，当多个子元素浮动时，父块的高度会丢失。通常，父块的高度和宽度会拉伸以适应内容，但浮动内容并非如此。父容器的高度和宽度不会被浮动元素修改。值得庆幸的是，这个臭名昭著的问题有很多解决方案，例如clearfix。您可以在此处阅读有关clearfix的更多信息。许多网格系统都是使用浮动设计的，它确实是网站的架构支柱。关于clearfix，它本质上是使用BFC[3]。定位有几种定位值可以放在一个元素上。所有元素上应该有的初始值是静态的，一种“in-flow”类型，我们稍后会讲到。定位值：值：static|relative|absolute|fixed|inherit初始值：staticPositioningoffsetproperty属性：top|Values，分别是static和relativestatic，前面说过，元素默认使用static作为流值。这意味着它们的行为正常，因为每个元素的行为都像一个布局。它们也不能与流出元素交互。相对定位与静态非常相似，但主要区别在于它们可以与流外元素进行通信。相对元素可以用作流外子元素的容器。流外定位元素尊重相关元素的边界。很酷吧？相对定位元素，不像static，还可以使用定位偏移属性来移动它。使用这些属性时，相对定位的元素框仍会占据其原始位置，但内容会变得乱七八糟。这里有两种流出定位属性，分别是absolute和fixed。在绝对定位模型中，一个框被完全从正常的文档流中移除（它不影响后续的兄弟元素）并被分配一个相对于包含块的定位。—W3规范的绝对定位元素带来了层级的概念。将元素想象成页面上不同的小纸片，您可以将这些小纸片堆叠在一起，这样一张小纸片就会叠加在另一张纸片之上。W3规范还提到它遵循一个包含块。这个包含块不是它的直接父块。如前所述，所有HTML元素都是静态定位的，不会影响流外元素。默认情况下，include块是body标签。如果你想创建一个包含块的HTML元素，它应该是除静态之外的任何定位元素（固定、相对或绝对）。这里多次提到ContainingBlock，可以参考彭哥写的文章：【常用CSSContainingBlock】()[4]固定定位是绝对定位的一个子类。唯一的区别是对于固定定位的块，包含块是由窗口创建的。—W3规范相当简单，这个窗口就是浏览器窗口。也就是说，与绝对定位元素不同，固定定位元素不会尊重任何具有固定/绝对/相对定位的父容器。它遵循的唯一父块是浏览器本身。当您希望某些内容保留在页面上时，这很有用，因为当您滚动时，所有固定定位的元素都将保留在页面上。总结至此我们就圆满的完成了文档模型的讲解！这篇博文将一如既往地进行调整，以包含信息丰富的图片、示例和一些练习（当我有时间时）。总的来说这篇文章比较干，没有代码和例子。JohnRosato主要对文档流做了一个概念性的总结。文档流其实就是元素的定位。文档流分为四种：普通文档流普通文档流displaytypedisplaytypefloatingboxfloatpositioningposition了解了上面的文档流后，我们对浏览器如何排列各个元素有了更宏观的认识，我们可以关注个人公众号【彭格尔回声】，了解更多。REFERENCE[1]https://soulandwolf.com.au/bl...[2]Differencebetweeninline,block,andinline-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
