浮动元素脱离文档流是因为Float使元素“漂起”，不再占据原位置，导致后续块级元素上移、父容器高度塌陷；文字环绕浮动元素，clear属性仅作用于自身，清除浮动需用伪元素、空标签或BFC方案。
浮动元素为什么会脱离文档流
因为 float 的本质是让元素“漂起来”——它不再占据原来的位置，后续的块级元素会直接往上顶，造成父容器高度塌陷。常见现象是：父 div 看似没内容、背景色不显示、边框包不住子元素。
这不是 bug，是 css2.1 明确定义的行为。只要用了 float: left 或 float: right，就默认脱离正常流。
- 文字会环绕浮动元素（这是最初设计目的）
- 兄弟块级元素会无视浮动元素的高度，从顶部开始布局
- 父容器若无其他非浮动内容，计算高度时直接忽略浮动子项
clear 属性只能作用于自身，不是“清理别人”
clear 不是给父容器加的，而是加在「需要避开浮动」的那个元素自己身上。比如一个 div 想从浮动列表下方完整换行，就得给自己设 clear: both。
典型误用：.parent { clear: both; } —— 这毫无意义，因为父容器本身没浮动，clear 对它不起作用。
立即学习“前端免费学习笔记（深入）”；
-
clear: left：该元素不能紧贴任何左浮动元素右侧 -
clear: right：不能紧贴任何右浮动元素左侧 -
clear: both：左右都不能贴，强制换行到底部 - 只对
display: block或table类型元素生效
清除浮动的三种实操方案及适用场景
目标都是让父容器“感知”到浮动子项的高度。没有银弹，选哪个取决于结构复杂度和浏览器兼容要求。
方案一：伪元素清除（推荐现代项目）
在父容器上加类，用 ::after 插入一个清除节点：
.clearfix::after { content: ""; display: table; clear: both; }方案二：额外空标签清除（简单但语义差）
在 html 中加
，位置必须在所有浮动子项之后、父容器闭合前。
方案三：触发 BFC（最干净，但有兼容限制）
给父容器设 overflow: hidden、display: flow-root 或 contain: layout。其中 display: flow-root 是专为此设计的，IE 不支持；overflow: hidden 可能意外裁剪阴影或定位元素。
flex 或 grid 布局下不需要清除浮动
一旦父容器设了 display: flex 或 display: grid，子元素的 float 就自动失效——它们会被 flex/grid 规则接管，不再脱离文档流。此时加 clear 或伪元素清除完全无效，也毫无必要。
真正要注意的是：不要在 flex 容器里混用 float，这属于逻辑冲突。如果发现浮动还在起作用，说明父容器根本没正确启用 flex（比如忘了写 display: flex，或被其他样式覆盖）。
老项目升级时容易忽略这点：清除浮动的代码残留 + 新增的 flex 布局，反而可能引发意外交互。