float元素导致父容器高度塌陷，因其脱离文档流使父容器无法感知其存在；正确清除方式是触发BFC，如伪元素法、overflow或display:flow-root。
为什么 float 元素会让父容器高度塌陷
浮动元素会脱离普通文档流，父容器在计算高度时直接忽略它们，导致 height: auto 的父容器“看不见”子元素，表现为高度为 0 或远小于预期。这不是 bug，是 CSS 规范定义的行为，但实际布局中极易引发错位、背景丢失、后续元素上移等问题。
- 常见现象：
div包裹几个float: left的img或aside，父容器背景色不显示、边框压不住内容 - 影响范围：仅作用于设置了
float的元素及其直接父容器；不影响 flex / grid 容器 - 注意：现代布局中应优先用
display: flex或display: grid替代float布局，但维护旧项目或特定场景（如文字环绕）仍需处理浮动
clear: both 不是清除浮动的正确写法
clear: both 只是让当前元素避开左右浮动元素，它本身不触发 BFC，也不修复父容器塌陷。把它加在最后一个浮动子元素上，只是把那个元素“往下推”，父容器依然不知道前面的浮动子元素存在。
- 错误做法：
.last-item { clear: both; }—— 父容器高度仍为 0 - 真正需要的是让父容器“包含”浮动子元素，即创建一个新的块级格式化上下文（BFC）
-
clear应该用在需要换行定位的兄弟元素上（如浮动导航后紧跟正文），而非用于“清浮动”目的
推荐的清除浮动方法（按优先级排序）
以下方案均通过触发 BFC 或利用伪元素实现包裹，兼容性与语义性兼顾：
-
伪元素法（推荐）：在父容器上添加
::after并设clear: both，同时保证其为块级且不被折叠.clearfix::after { content: ""; display: table; clear: both; } /* 或更通用的写法 */ .clearfix::after { content: ""; display: block; clear: both; height: 0; overflow: hidden; } -
overflow 触发 BFC（简单但有风险）：
overflow: hidden或auto可强制父容器生成 BFC，从而包含浮动子元素；但可能意外裁剪阴影、下拉菜单或溢出动画 -
display: flow-root（现代首选）：CSS 新增值，专为解决此问题设计，无副作用
.container { display: flow-root; }—— Chrome 64+、Firefox 62+、Safari 15.4+ 支持，IE 完全不支持
容易被忽略的细节和陷阱
清除浮动不是“加个类就完事”，实际项目中常因细节翻车：
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须有
content属性，哪怕为空字符串；否则不渲染，clear无效 -
display: table在伪元素中会引入额外的table-cell行为，某些老版 Safari 下可能撑开不必要的高度；display: block更稳妥 - 如果父容器本身有
padding或border，伪元素的height: 0和overflow: hidden能防止它撑高容器 - 使用
display: flow-root时，要确认不需要继承父容器的display: inline或其他 display 类型——它会覆盖原有 display 值
