浮动元素脱离文档流导致父容器高度塌陷，后续内容上移造成“下沉错觉”；常用清除方法有伪元素clearfix、overflow触发BFC、额外空标签三种。
浮动元素会脱离文档流，导致父容器无法正确计算高度，看起来就像“页面整体下沉”——实际是父容器高度塌陷，后面的内容向上顶上来了。
为什么父容器高度会塌陷
当子元素设置了 float: left 或 float: right，它就不再参与父容器的常规高度计算。如果父容器没有其他非浮动内容或固定高度，它的高度就会变成 0，视觉上就像“缩没了”，后续区块自然会上移，造成“下沉错觉”。
清除浮动的常用方法（推荐 3 种）
✅ 方法一：伪元素清除（现代推荐）
在父容器 CSS 中添加：
content: "";
display: table;
clear: both;
}
然后给浮动容器加 class="clearfix"。这是最干净、无额外 HTML 的方案，兼容性好（IE8+）。
✅ 方法二：overflow 触发 BFC（简单快捷）
直接给父容器设置：
overflow: hidden; /* 或 auto、scroll */
}
原理是让父容器形成 BFC（块级格式化上下文），BFC 区域会包含内部浮动元素，从而撑开自身高度。注意：慎用 overflow: hidden，可能意外裁剪溢出内容（如 dropdown、tooltip）。
立即学习“前端免费学习笔记（深入）”；
✅ 方法三：额外空标签清除（不推荐但易懂）
在浮动元素末尾加一个空标签：
左
右
虽然有效，但污染 HTML 结构，维护性差，仅适合临时调试。
检查是否还有遗漏浮动
常见疏漏包括：
- 多个浮动子元素中，最后一个没被清除
- 嵌套浮动容器未各自清除（每层浮动父容器都需处理）
- 使用了 transform、position: absolute 等也脱离文档流，但它们不会影响父容器高度计算逻辑——别和浮动混淆
- CSS 预处理器（如 Sass）中，clearfix 混入未正确引入或拼写错误
不复杂但容易忽略，关键是理解“浮动脱离文档流”这个核心，再对症选清除方式。优先用伪元素 clearfix，兼顾语义与健壮性。
