什么是脱离标准流

• 什么是脱离标准流
  • 标准流
  • 脱离标准流会造成的影响

标准流

在不加任何特殊样式的情况下，HTML 元素会按顺序自然排列，这就是标准流：

• 块级元素（div, p, h1 等）：垂直排列，默认占满整行；
• 行内元素（span, a, strong 等）：水平方向排列，在一行内流动；
• 元素之间会互相“挤开”但不会重叠。

“脱离标准流”指的是一个元素不再按照正常的文档流（standard flow）参与页面布局。

脱离标准流主要有以下几种方式

• float(浮动)

float: left;

元素会向左/右浮动，脱离正常文档流；

后面的元素会“环绕”它；

父元素可能塌陷（高度为 0），需 clear 或清除浮动。

• position: absolute 或 fixed

position: absolute;
position: fixed;

元素从标准流中完全移除；

使用 top / left / right / bottom 相对于最近的“定位祖先”来定位；

不再占据文档流位置，兄弟元素视其为不存在。

• position: relative（部分脱离）

虽然 relative 不会真正脱离标准流（它仍保留原位置），但其偏移是视觉上的，其他元素仍视它原本位置存在。

脱离标准流会造成的影响

影响点	描述说明
不再占据空间	元素不会在标准流中占据位置，其他兄弟元素会忽略它的存在，可能导致重叠布局
父元素高度塌陷	脱离流的子元素不再撑开父容器，导致父元素高度为 0，需额外处理（如清除浮动）
文档流混乱	兄弟元素位置不再受到它影响，导致布局不稳定或超出预期
调试变复杂	元素偏移、浮动后容易出现重叠、遮挡、错位，排查难度加大
兼容性风险	某些老旧浏览器或特殊布局下，表现可能不一致