文档流
CSS 在布局时，一旦生成盒子之后，引擎就需要定位它们以完成布局。
下面是定位盒子时所使用的规则：
- 标准流：按照次序依次定位每个盒子。
- 浮动流：将盒子从标准流中拎出来，放到外层盒子的某一侧。
- 定位流：将盒子从标准流中拎出来，按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素。
层级高度：定位流 > 浮动流 > 标准流 。
标准流
当 float 值为 none 时，且 position 值为 static/relative，该盒子位于标准流中。
在标准流中，盒子会依次放置。在块级格式化上下文（ BFC ）中，盒子在垂直方向自上而下依次排列，在行内格式化上下文（ IFC ）中，盒子则在水平自左向右依次排列。
浮动流
当 float 值不为 none ，且 position 为 static/relative 时，该盒子位于浮动流中。
在浮动流中，浮动盒子会浮动到当前行的左侧或右侧。这会导致标准流中的文本及其他内容会移到浮动盒子的边缘处，除非元素清除浮动。
定位流
当 position 为 absolute/fixed ，该盒子位于定位流中。
在定位流中，盒子会完全从标准流中移除，其位置会相对其包含块进行计算。
TIP
当一个元素同时应用浮动和定位时，优先级分情况而定：
- 当
position值为absolute/fixed时，定位优先级高于浮动，定位生效而浮动不生效。 - 当
position值为static/relative时，浮动优先级高于定位，两者同时生效。