浮动元素脱离标准文档流，因其被抽离原位置、不参与块级垂直堆叠，但仍受限于包含块且参与行框布局，导致父容器塌陷、后续元素上移及文字绕排。
浮动元素会脱离标准文档流，是因为 CSS 的 float 属性本质上是为图文混排设计的布局机制，它让元素“漂”到容器左侧或右侧，不再参与块级元素的垂直堆叠排列。
浮动元素如何脱离标准流
标准流（Normal Flow）指元素按 HTML 顺序自上而下、从左到右自然排列：块级元素独占一行，行内元素在行内依次排列。一旦给元素设置 float: left 或 float: right，该元素就：
- 从标准流中被“抽离”，不再占据原来的位置（后续块级元素会向上填补）
- 向指定方向移动，直到碰到父容器边缘或另一个浮动元素的边界
- 仍保留在当前行框（line box）中，因此能与行内内容（如文字）实现环绕效果
脱离标准流带来的典型表现
最直观的后果是父容器高度塌陷和后续元素位置异常：
- 父容器无法包裹浮动子元素：因为浮动子元素已不在文档流中，父容器计算高度时“看不见”它们，导致高度变为 0（除非有其他非浮动内容撑开）
- 后续块级元素会上移“侵占”原浮动元素位置：例如两个相邻 div，第一个 float:left，第二个会从顶部开始渲染，可能与前者重叠或侧向排列
- 文字会自动绕排浮动元素：这是浮动的原始目的——像印刷排版中的图片，文字沿其边缘流动
为什么说“脱离”但不是“完全独立”
浮动元素虽脱离标准流，但仍受部分上下文约束：
立即学习“前端免费学习笔记（深入）”；
- 它的定位范围仍受限于**包含块（containing block）**，通常是最近的、设置了 position: relative / absolute / fixed 或是块级格式化上下文（BFC）根元素的父容器
- 浮动元素之间会相互影响：同向浮动的元素会依次排列，反向浮动则可能错行或重叠
- 它仍参与**行框布局（inline formatting context）**，所以能和文本、inline 元素自然共存
现代开发中如何应对浮动脱离流的问题
虽然 Flex 和 Grid 已成主流布局方案，但理解浮动仍有价值。若仍需使用浮动，常见处理方式包括：
- 触发 BFC：给父容器设置 overflow: hidden、display: flow-root（推荐）、float: left 或 position: absolute 等，使其成为独立的格式化上下文，从而包含浮动子元素
- 清除浮动（clear）：在浮动元素后的元素上设置 clear: both，强制其移到所有浮动元素下方
- 伪元素清除法（clearfix）：在父容器末尾插入 ::after 伪元素并设 clear: both，不增加冗余标签
