CSS文档流

CSS文档流(document flow)和普通流(normal flow)实际上指的是同一个概念。

文档流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,或者说在排布过程中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

非浮动的块级元素独占一行,行内元素不会独占一行。floatposition: absolute,position: fixed都会使元素脱离文档流。脱离文档流的元素不会占据空间。其他文档流的元素会占据其原来位置。表现在视觉上就是——重叠。

position: relative不会使元素脱离文档流。position: relative元素会基于原来的位置进行偏移。但是其他文档流中的元素不会占据其原来的空间。