display: flow-root 是解决浮动塌陷的最优解，一行代码触发 bfc，兼容现代浏览器且无裁剪等副作用；clear: both 仅作用于自身，加在父容器上无效；伪元素 clearfix 需 content: ""、display: table、clear: both 缺一不可。
浮动元素脱离文档流后，父容器高度塌陷、后续元素错位、背景/边框不显示——这些问题不是“样式没写对”，而是文档流秩序被破坏的必然结果。解决核心不是“加个 clear”，而是选对触发条件和作用范围。
为什么 clear: both 放在浮动元素后面无效
常见错误是把 clear: both 写在浮动元素的同级下一个 <div> 上，却忘了它只影响自身所在行的“换行行为”，并不修复父容器塌陷。真正需要清除的，是浮动对父级高度计算的影响，而非单纯让下一行不绕排。
<ul>
<li>
<code>clear 只控制元素自身的定位位置，不能让父元素重新包含子元素
clear 必须作用于该父容器的“内部末尾”（如伪元素），或触发父容器自身的 BFC<div class="clear"></div> 能撑开父高，但污染 HTML 结构，且对响应式不友好
overflow: hidden 清除浮动的副作用
给父容器设 overflow: hidden 是最快捷的清除方式，但它本质是触发 BFC，同时会裁剪所有溢出内容——哪怕只是轻微的阴影、下拉菜单、tooltip 或 transform 位移。
- 若父容器内有
position: absolute子元素超出边界，会被隐藏 - 配合
transform: translateY(-5px)做微调时，可能意外截断 -
overflow: auto同样触发 BFC，但滚动条出现逻辑不可控；overflow: clip更精准但 IE 不支持 - 现代项目建议优先用
display: flow-root替代，语义清晰且无裁剪风险
伪元素 ::after 清除法的三个硬性条件
经典 .clearfix::after 方案必须同时满足三个条件才生效，缺一不可：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
content: ""—— 伪元素无内容则不渲染，clear失效 -
display: block（或table）—— 行内伪元素无法应用clear -
clear: both—— 仅clear: left或right无法应对混合浮动方向
漏掉任意一条，比如只写 content: "" 和 clear: both 却没设 display，就会导致伪元素不占空间、清除失败。
现代布局中何时可以彻底不用清除浮动
当你用 display: flex 或 display: grid 布局父容器时，子元素即使写了 float 也**完全失效**——Flex/Grid 容器自带强文档流控制，浮动被忽略，自然不存在塌陷问题。
- 浮动仅在块级格式化上下文（BFC）中起作用；Flex/Grid 创建的是独立格式化上下文，与浮动机制互斥
- 但要注意：不要混用，比如父容器设了
display: flex，又给子项写float: left，后者会被静默丢弃，调试时容易误判 - 如果历史代码中浮动已成习惯，迁移时应同步删除所有
float声明，而非保留并“清除”
最易被忽略的点：清除浮动不是目的，恢复文档流秩序才是。很多问题表面看是“清不干净”，实际是父容器没形成 BFC、伪元素没渲染、或根本不需要清除——比如你已经用了 Grid，还费劲加 clearfix，反而引入冗余逻辑。
