正常文档布局流

正常文档布局流（normal document layout flow）是指在没有改变默认布局规则情况下的页面元素布局方式。如果你未曾应用任何CSS规则来改变它们的展现方式，网页上的元素将会按照正常布局流来组织布局。
首先说一下独立元素的布局。元素的内容被放在一个独立的元素盒子中，然后在其周边加上内边距（padding）、边框（border）和外边距（margin） — 就是我们所说的盒子模型（box model）。默认情况下，一个块级元素（典型如div）的内容宽度是其父元素的100%，其高度与其内容高度一致。内联元素（典型如span）的高度、宽度与内容一致。你可以通过设置 display: block 与 display: inline 来将一个元素变为块级元素或内联元素。
元素之间又是如何相互影响的呢？块级元素默认会按照基于其父元素的书写顺序（writing-mode: horizontal-tb）的块流动方向（block flow direction）放置 — 每个块级元素会在上一个元素下面另起一行，它们会被设置好的外边距（margin）分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。内联元素的表现有所不同 — 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。

如何脱离正常文档流

有时候我们希望元素脱离正常的文档流，在正常文档流中不占用空间，我们有如下三种方法可以达到目的：

  1. 使用 float 属性

设置 float:left; 或 float:right; 后，其他盒子占用空间时会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围

  1. 设置 position: absolute;

设置 position: absolute; 后该元素会相对于非 position: static; 的祖先元素进行定位

  1. 设置 position: fixed;

设置 position: fixed; 后元素会相对于浏览器窗口进行定位