常规流

normal flow

网页中的流就是对文档的读取和输出的顺序. 其遵循从左到右, 从上到下的读取, 输出和显示顺序.

通常的资料中, 常常称之为文档流, 但是标准中没有这种说法, 只有normal flow一词, 应称之为普通流, 或常规流.

在普通流中, 元素按照其在 HTML 中的先后位置至上而下布局, 在这个过程中, 行内元素水平排列, 直到当行被占满然后换行; 块级元素则会被渲染为完整的一个新行.

除非另外指定, 否则所有元素默认都是普通流定位, 也可以说, 普通流中元素的位置由该元素在 HTML 文档中的位置决定.

脱离常规流

引用w3c的标准文档的定位方案一节, 它对何为normal flow, in-flow, out-of-flow都给出明确的定义.

9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positioning schemes:

  1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
  2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

在css2.1中, 一个框盒的布局, 取决于三种定位模式.

  • 常规流
  • 浮动机制
  • 绝对定位

除了根元素, 后两种布局模式的元素就被称为是脱离常规流的.

# 浮动

浮动机制中, 一个框盒首先根据常规流来布局, 然后脱离常规流, 向左/右移动. 这导致沿着它边上的文本content都将"浮动". 即, 其它盒子看不到被float的盒子, 但其它盒子中的文本却能看到它.

# 绝对定位

绝对定位机制中, 一个框盒被完全地从常规流中删除, 所以对它的后续邻接毫无影响.

我们要把fixed作为绝对定位的一个特例考虑

所以我们可以知道, 一旦一个元素脱离常规流:

  • 其它元素当它不存在
  • 但不会从dom树中脱离

借用一句话:

有户口, 没有地, 依然是本国公民.

References