清除浮动本身不解决父容器塌陷，根本原因是浮动子元素脱离文档流；有效方案本质是让父容器建立新的BFC，如clearfix伪元素、overflow:hidden或display:flow-root。
为什么清除浮动后父容器还是塌陷
清除浮动本身不解决塌陷，它只让某个元素避开前面的浮动项；塌陷的根本原因是浮动子元素脱离文档流，父容器无法感知高度。所以你写了 clear: both 却没效果，大概率是加错了位置——比如加在浮动子元素自己身上，或加在非块级、已脱离文档流的元素上。
常见错误现象：#div3 背景色消失、边框压不住内容、“test 3”文字孤零零浮在顶部、后续元素往上顶。
-
.child { float: left; clear: both; }→ 没用，子元素仍脱离文档流，父容器高度还是 0 - 给父容器写
.parent { clear: both; }→ 无效，clear不作用于子项，只影响自身与兄弟元素的相对位置 -
::before伪元素清除 → 错，必须用::after插入到所有浮动子项之后才能兜住
.clearfix::after 三要素缺一不可
这是目前兼容性最好、副作用最小的通用解法，IE8+ 都能跑，但漏掉任意一项就会失效。
标准写法必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
content: ""：空字符串触发伪元素渲染，不写就等于没定义 -
display: table（或block）：确保伪元素是块级，能参与清除；inline不行 -
clear: both：必须写在::after上，且只能出现在浮动子项之后
正确示例：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器加 class="clearfix"，比如 <div id="div3" class="clearfix">。
overflow: hidden 看似简单，但容易裁剪内容
它靠触发 BFC 间接包裹浮动子项，不是为清除而生，所以副作用明显。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
典型问题场景：
- 下拉菜单、弹出层、阴影、横向滚动条等需要溢出的内容被意外裁剪
- Safari 对空内容敏感，
overflow: auto可能弹出无用滚动条 - 父容器已有
overflow: visible，被其他样式覆盖时需检查优先级或!important - 会抑制 margin 折叠，可能让原有间距逻辑错乱
如果只是临时调试或确定没有溢出需求，overflow: hidden 最快；但上线前务必验证所有交互态是否被截断。
display: flow-root 是现代项目的首选
它是 CSS Display Module Level 3 明确为解决塌陷设计的值，语义清晰、无副作用，2026 年主流浏览器已全面支持。
优势很直接：
- 一行代码：
.container { display: flow-root; } - 不裁剪溢出内容，不影响
position: absolute定位参考系 - 比
overflow: hidden更安全，比伪元素更干净
兼容底线：Chrome 64+、Firefox 58+、Safari 15.4+。如果你的项目不需支持 Safari ≤15.3 或 IE，就该直接用它——别再手动维护 clearfix 类了。
真正容易被忽略的是：所有有效方案的本质，都是让父容器建立新的 BFC。不是“清浮动”这件事本身起效，而是它附带触发了 BFC。所以判断方案是否生效，关键看父容器是否重新包含了子项高度，而不是有没有写 clear 这个词。
