float导致父容器高度塌陷的典型表现是父元素高度为0、内容重叠；根本原因是浮动元素脱离文档流，父容器无法感知其尺寸；现代方案应优先使用flexbox或grid布局，必要时用display: flow-root创建bfc来安全清除浮动。
float 导致父容器高度塌陷的典型表现
父元素看不见了，或者后面的内容叠上来了，检查 DOM 会发现父 div 高度是 0 —— 这不是 bug，是 float 的渲染机制决定的：浮动元素脱离文档流，父容器无法感知其尺寸。
常见于导航栏、图文混排、卡片网格等场景，尤其当子元素全用 float: left 或 float: right 时必现。
- 别指望
height: auto自动撑开，它真不会 -
overflow: hidden能临时“骗”出高度，但会意外裁剪溢出内容（比如下拉菜单、tooltip） -
clear: both放在末尾空标签里能起作用，但多一个无意义 DOM，语义差，维护麻烦
现代项目该用什么替代 float 清除逻辑
直接停用 float 做布局。CSS Grid 和 Flexbox 是更可控、更可预测的方案，清除浮动这回事，在它们面前根本不存在。
比如把老式浮动导航换成 Flex：
.nav {
display: flex;
}
.nav-item {
flex: 0 0 auto; /* 不伸缩，不压缩 */
}
- Grid 适合二维布局（行列都需精确控制），Flex 更适合一维排列（主轴+交叉轴）
- 如果必须兼容 IE10/11，
display: flex仍比各种clearfixhack 更稳定 - 千万别为了“支持 IE8”硬套
:before/:after伪元素清除法，那套代码现在连 MDN 都不推荐了
实在绕不开 float 时，最简可靠的清除方式
用 display: flow-root —— 它让容器建立新的 BFC，自然包含内部浮动，且不干扰内外布局流。
- 比
overflow: hidden安全：不会隐藏position: absolute溢出或transform移动后的内容 - 比伪元素 clearfix 简洁：一行 CSS，无额外 DOM，无兼容性问题（Chrome 64+/Firefox 59+/Safari 10.1+）
- IE 全系不支持，但如果你还在支持 IE，那清除浮动只是你该解决的最小问题
为什么不要手写 .clearfix 类
老式 .clearfix 依赖 :before 和 :after 插入内容并设置 clear: both，看似通用，实则埋雷。
- 遇到
zoom: 1触发 hasLayout 的写法，会在某些缩放场景下引发重绘异常 - 若父元素本身有
content样式（比如图标字体），伪元素可能干扰原有视觉 - 和 modern CSS（如
contain: layout）叠加时行为不可预测，调试成本高
真正需要向后兼容的场景极少，绝大多数新项目直接用 display: flow-root 或换布局模型更省心。
浮动没死，但它早就不该负责布局了。清除逻辑越复杂，越说明该换思路了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
