clearfix不是必须但仍是兼顾兼容性与语义的最优解；其核心是通过::after在父容器末尾插入块级占位并clear: both来撑开高度，而非直接给父元素写clear: both——因clear只对自身兄弟元素生效，对祖先无效。
不是必须用 clearfix，但它是目前兼顾兼容性、语义性和副作用控制的最优解——尤其当你还不能放弃 IE11 或旧版 Safari 时。
clear: both 写在父元素上为什么无效
clear 属性只对「自身所在的块级盒」生效，且仅作用于它前面的浮动兄弟元素。父容器本身不是浮动元素的兄弟，而是它们的祖先。所以：
- 给父元素写
clear: both完全没效果，浏览器会忽略 - 把
clear写在浮动子元素内部（比如浮动 div 自己设clear: both）也不行——它只清自己前面的浮动，不解决父容器塌陷 - 真正起作用的位置，是「浮动元素之后、父容器之内」的一个块级兄弟节点
.clearfix::after 是怎么精准补上那个“兄弟节点”的
伪元素 ::after 在渲染时被插入到父元素内容末尾，等效于在 HTML 中手动加了一个 <div class="clear"></div>，但它不污染 DOM 结构。关键点在于：
-
content: ""必须存在，否则伪元素不生成（哪怕空字符串也不可省略） -
display: table比block更稳妥：自动触发 BFC，且避免因基线对齐导致的额外高度 -
clear: both让这个伪元素“拒绝”和任何浮动元素同行，从而把父容器底部撑开 - 不用
height: 0; overflow: hidden—— 那样会裁剪box-shadow或transform溢出部分
display: flow-root 为什么不是万能替代
display: flow-root 确实一行代码解决塌陷，且无副作用，但它在以下场景不可用：
立即学习“前端免费学习笔记（深入）”；
- IE11 及更早版本完全不支持
- Safari 15.3 及更早版本中存在渲染异常（比如 flex 子项 margin 折叠失效）
- 某些 CMS 或低代码平台生成的样式表仍强制要求 IE 兼容模式，
flow-root会被静默忽略 - 团队项目中若混用旧版 Bootstrap（如 v3.x）或 jQuery UI 组件，其 CSS 可能隐式依赖
clearfix行为
真正容易被忽略的是：clearfix 不是“清除浮动”，而是“让父容器重新包含浮动”。只要浮动还在用，这个逻辑就绕不开；而一旦你全面迁移到 flex 或 grid，float 本身已基本失效，clearfix 就真的可以删了。
