父元素高度塌陷是float的设计行为而非bug：浮动元素脱离文档流，父容器计算高度时忽略它们；可用.clearfix::after清除浮动或overflow:auto触发bfc，但后者有裁剪风险；现代项目应优先使用flex或grid布局。
为什么父元素高度会塌陷成 0
这不是 bug，是 float: left 或 float: right 的设计行为：浮动元素完全脱离普通文档流，父容器在计算 height: auto 时直接忽略它们。哪怕子元素写了 height: 200px，父容器也“看不见”。常见现象包括背景色不显示、边框消失、后续元素向上叠压。
用 .clearfix::after 清除浮动最稳妥
它不依赖 BFC，而是插入一个真实参与文档流的块级锚点，把父容器底部“拉下来”。关键点：
-
content: ""必须存在，否则伪元素不渲染 -
display: table（或block）让伪元素有布局占位 -
clear: both强制它落到所有浮动子元素下方 - 类名必须加在直接包裹浮动子项的那个父容器上，隔一层就失效
示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
HTML 中：<div class="clearfix"><div style="float:left"></div></div>
用 overflow: auto 触发 BFC 要小心副作用
它确实能“撑高”，但本质是触发 BFC，强制父容器包含浮动子项。前提有三个：
- 父容器不能设
height或max-height（否则锁死高度） - 子元素确为
float: left或float: right（position: absolute不算） - 原
overflow值不能是visible（因为不触发 BFC）
最大风险是裁剪：下拉菜单、position: absolute 的 tooltip、负 margin 装饰、动画中移出边界的弹窗，全会被切掉。Safari 下还可能无故出现空白滚动条。
现代项目优先用 display: flex 或 display: grid
它们天然不脱离文档流，父容器高度自动包含子项，float 属性会被浏览器直接忽略。兼容性已足够好：
-
flex：IE10+ 支持良好 -
grid：Chrome 64+/Firefox 58+/Safari 15.4+ 稳定
混用 float 和 flex/grid 不仅多余，还会增加调试成本——比如 float 失效后你还以为是清除没做好。真正卡住的点，往往不是代码写得对不对，而是没确认子元素是否真的在浮动——打开开发者工具，看 computed 样式里的 float 值是不是 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
