现代项目应优先用 display: flow-root 触发 BFC 自动包裹浮动，语义清晰、无副作用；.clearfix 仅是兼容旧浏览器的过渡方案，且 clear: both 加在父元素上无效，因 clear 只作用于自身定位，不改变父容器布局上下文。
现代项目里，.clearfix 不再是“万能”或“推荐”的解决方案——它只是兼容老浏览器的过渡手段，真要优雅，得绕开浮动本身。
为什么 clear: both 加在父元素上完全无效
很多人误以为给父容器加 clear: both 就能“清浮动”，结果发现高度还是塌陷。这是因为 clear 只控制**当前元素自身**的位置，让它避开前面的浮动元素；它不改变父容器的布局上下文，也不让父容器重新包含浮动子项。
- 写成
.parent { clear: both; }—— 父元素自己没浮动，clear根本不生效 - 写成
.parent::after { clear: both; }但漏了content: ""—— 伪元素不渲染，清除失效 - 用
display: block而非display: table—— 在 IE6/7 下可能触发 margin 双倍 bug
.clearfix::after 的最小可靠写法（IE8+）
如果你确实要保留浮动并修复塌陷，只用这三行就够了：
.clearfix::after {
content: "";
display: table;
clear: both;
}
不需要 ::before，不需要 zoom: 1，不需要 height: 0 或 visibility: hidden。
立即学习“前端免费学习笔记（深入）”；
-
display: table比block更稳妥：它既触发 BFC，又避免生成额外行高 - 只对真正含
float子元素的容器加这个 class；Flex/Grid 容器加了也白加 - 若父容器已设
overflow: hidden或display: flow-root，再加.clearfix是冗余的
比 .clearfix 更优雅的替代方案
真正“优雅”，是让问题根本不存在。浮动不是为页面布局设计的，它的原始用途只是图文环绕。
- 用
display: flex替代多列浮动：子项自动排列，父容器自然撑开，无需任何清除逻辑 - 用
display: grid替代复杂浮动嵌套：行列定义清晰，响应式更可控 - 用
display: flow-root触发 BFC：无裁剪、无定位副作用，Chrome 64+/Firefox 58+ 全支持，语义明确
例如：.container { display: flow-root; } —— 一行代码，干净收工。
容易被忽略的兼容性现实
所谓“万能模板”往往暗藏陷阱：
- 声称兼容 IE6–7 的
.clearfix写法，在 IE6 下根本不会解析::after，实际靠的是zoom: 1触发 hasLayout，和清除浮动无关 - 给一个
position: fixed的侧边栏加.clearfix，可能干扰其脱离文档流的行为 - 在 CMS 输出的 HTML 上硬套
.clearfix，而它内部已经用了 Flex，反而可能破坏原有布局
要不要支持 IE10 以前的浏览器，这个决策本身，比选哪段 CSS 更关键。
