现代项目应优先用 display: flow-root 替代 clearfix；::before 防外边距折叠，::after 清浮动；ie hack 可删；flex/grid 容器无需 clearfix。
双伪元素 clearfix 不是“更优雅”，而是为兼容旧浏览器（尤其是 IE6–8）留的兜底方案；现代项目里直接用 display: flow-root 更干净，且无副作用。
为什么必须同时写 ::before 和 ::after？
只写 ::after 在 IE8 及更早版本中会失效，因为旧引擎对伪元素的 BFC 触发逻辑不完整。::before 的作用不是清除浮动，而是提前创建一个匿名 table 盒子，稳定父容器的块级格式化上下文（BFC），防止顶部外边距折叠（margin collapse）——这在浮动 + 首子元素有 margin-top 的场景下尤为关键。
-
content: ""缺一不可：没它，伪元素根本不生成，后续所有声明无效 -
display: table必须用于两个伪元素：它比block更稳，不继承line-height，也不参与 margin 合并 -
::after单独加clear: both才真正执行清除动作；::before不需要这行
.clearfix {*zoom: 1} 是干啥的？能删吗？
这是针对 IE6–7 的 hasLayout 触发 hack。*zoom: 1 是 IE 私有属性，让旧引擎强制重绘并识别浮动子项高度。2026 年绝大多数项目已放弃 IE 支持，若目标浏览器不含 IE，这行可安全删除。
- 保留它不会影响现代浏览器，但会增加 CSS 体积、干扰 lint 工具校验
- 若使用 PostCSS 或构建工具（如 Autoprefixer），该属性通常会被自动剥离
- Vue/React 组件中用 scoped style 时，
*zoom可能因选择器降权而失效，不如直接弃用
移动端 Safari 点击区域消失？可能是 ::after 被层叠上下文隔离了
当父容器同时存在 transform（如 translateY）、filter 或 will-change 时，它会创建新的层叠上下文，导致 ::after 的 clear: both “看不见”浮动元素——开发者工具里节点还在，但 computed 值显示 clear: none。
- 别硬修伪元素，优先改布局：把
transform下移到子元素上 - 或直接替换为
display: flow-root，它天然抗层叠上下文干扰 - 若需兼容 iOS 14 以下，改用
overflow: auto（不是hidden），它也能触发 BFC 且不裁剪绝对定位内容
什么时候根本不用写 .clearfix？
写了反而可能出问题——比如父容器已经是 display: flex 或 display: grid，浮动本身就不生效，clear: both 完全无意义；或者父容器已设 overflow: hidden、contain: layout，它自己就在 BFC 中，再套一层 .clearfix 可能意外裁剪 position: absolute 的下拉菜单或 tooltip。
- 检查父容器是否已触发 BFC：用开发者工具看 Computed →
display是否含flow-root、flex、grid、table等值 - CSS-in-JS 环境（如 styled-components）中，哈希类名会让
.clearfix失效，建议改用属性选择器：[data-clear] - Vue 模板里别把
.clearfix加在组件根节点（<div class="my-component">），而应加在明确包裹浮动项的那个 <code><div> <p>真正容易翻车的，从来不是代码怎么写，而是你没意识到：父容器是否还在文档流里、有没有别的样式偷偷覆盖了 <code>::after、以及——你是不是还在给display: grid容器加.clearfix。
