.clearfix::after{content:"";display:table;clear:both}最稳，因三要素缺一不可：content触发渲染、display:table确保块级并兼容、clear:both在末尾清除浮动；单独给子元素加clear:both仅避让不撑父容器。
直接给父容器加 .clearfix 类，配合 ::after 伪元素 + display: table + clear: both，是目前最稳、兼容性最好、不污染 HTML 的写法。
为什么 clear: both 单独写在子元素上没用
clear 控制的是“自己别挨着浮动”，不是“告诉父容器：我在这儿”。给一个 float: left 的子元素加 clear: both，它只会往下挪到前一个浮动元素底部，但依然脱离文档流——父容器还是看不见它，高度照样塌陷。
常见误写：.child { float: left; clear: both; } → 父容器高度仍是 0。
-
clear不触发 BFC，也不让父容器重新包含子项 - 它只影响自身定位，纯属“避让指令”
- 真正起作用的
clear: both，必须出现在浮动元素之后、且属于普通文档流的元素上（比如伪元素或空<div>）
.clearfix::after 必须这么写，漏一项就失效
标准写法不是“随便加个 clear”，而是三要素缺一不可：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
content: ""：伪元素不渲染，clear就是摆设 -
display: table（或block）：display: inline的伪元素无法清除浮动；table兼容性更好，能自然撑开父容器 -
clear: both：写在::after上，确保清除发生在所有浮动子元素之后
完整代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：::before 不行，它插在内容前面，起不到“末尾清除”作用；也不能只写 ::after 却漏掉 content 或 display。
overflow: hidden 和 display: flow-root 怎么选
overflow: hidden 能触发 BFC，间接解决塌陷，但它副作用明显：
- 会裁剪溢出内容（比如下拉菜单、阴影、横向滚动条）
- 设成
auto可能在 Safari 中对空内容意外弹出滚动条 - 会抑制 margin 折叠，可能干扰已有布局逻辑
display: flow-root 是专为这问题设计的现代方案，语义清晰、无副作用，但兼容性有底线：
- Safari 10.1+、Chrome 64+、Firefox 58+ 支持
- IE 完全不支持，老项目慎用
- 如果项目需兼容 IE11 或旧版 Safari，仍得靠
.clearfix
容易被忽略的关键点
真正决定父容器能否撑高的，从来不是“有没有清除动作”，而是“父容器是否建立了新的块级格式化上下文（BFC）”。clear 本身不创建 BFC，它只是在 BFC 内部起定位作用。所以所有有效解法的本质，都是让父容器自己重新包含子项——要么靠伪元素触发 BFC，要么靠 flow-root 显式声明，要么靠 overflow 附带触发。别再试图靠给浮动子元素加 clear 来“修塌陷”，那是在改错地方。
