float导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；最稳妥清除法是用::after伪元素触发BFC，如.clearfix::after{content:"";display:table;clear:both}。
为什么 float 会导致父容器高度塌陷？
当子元素用了 float: left 或 float: right，它会脱离普通文档流，父容器就“看不见”它了，于是计算高度时直接忽略——结果就是父容器高度变成 0，背景、边框、后续元素都会错位。
最稳妥的清除方式：用 ::after 伪元素触发 BFC
这是目前兼容性好、无侵入、不加空标签的主流方案。核心是让父容器创建一个新的块级格式化上下文（BFC），从而包含浮动子元素。
实操写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用时只要给浮动元素的父容器加上 class="clearfix" 即可。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
display: table是关键，它让伪元素成为一个匿名表格单元，能自然撑开父容器 - 不用
display: block+clear: both，因为纯块级元素在某些老浏览器中仍可能无法完全撑高 - IE8+ 全支持；IE6/7 需额外加
*zoom: 1触发 hasLayout
现代项目优先用 display: flow-root
这是 CSS 新增的标准属性，专门用来创建 BFC，语义清晰、代码极简，且不影响布局流。
直接给父容器设置：
.container {
display: flow-root;
}
优势明显：
- 一行解决，无需伪元素或额外 class
- 不会像
overflow: hidden那样意外裁剪子元素的position: absolute或阴影 - Chrome 64+、Firefox 58+、Safari 12.1+、Edge 79+ 均支持；如需兼容 IE，不能单独依赖它
哪些“清除法”现在该避免？
有些老办法看似简单，但副作用明显，容易埋坑：
-
overflow: hidden或overflow: auto：可能隐藏子元素的box-shadow、transform溢出部分，或触发不必要的滚动条 - 在 HTML 里加空
<div style="clear:both"></div>：污染结构、增加无意义 DOM 节点，维护成本高 -
float父容器本身：会让父容器也脱离文档流，引发连锁错位，基本等于把问题往后推
浮动本身已是过时布局手段，清除只是补救；真正要注意的是——别在 Flex 或 Grid 容器里还用 float，那会直接失效或产生不可预期行为。
