clearfix 双伪元素写法是为兼容 IE6/7：::before 用 display: table 和 content: "" 触发 hasLayout，::after 才执行 clear: both 清浮动；现代浏览器仅需 ::after 或 display: flow-root。
为什么 clearfix 有时写成 .clearfix::before, .clearfix::after？
这不是“必须”，而是为兼容老版本 IE（特别是 IE6/7）做的兜底处理。现代浏览器只靠 ::after 就够了，但 IE6/7 对 ::after 的支持不完整或存在渲染 bug，导致伪元素不触发 BFC 或未正确清除浮动。
双伪元素写法本质是：用 ::before 触发 hasLayout（IE 特有机制），再用 ::after 做真正的清浮动。两者分工不同，不是重复劳动。
-
::before不负责清浮动，只设content: ""+display: table（或display: inline-block），目的是让 IE6/7 父容器“拥有布局”（hasLayout），从而能正确包裹子元素 -
::after才真正承担clear: both职责，且必须带content: ""和display: table（或block） - 如果只写
::after，在 IE6/7 中可能完全不生效——不是样式写错，是引擎压根没渲染这个伪元素
::before 在 clearfix 里到底干了什么？
它什么都没“清”，也不参与浮动截断逻辑。它的唯一作用是：骗 IE6/7 认为这个容器需要重新计算尺寸和流式行为。
IE6/7 的 hasLayout 是个内部标志位，影响盒模型、边距合并、浮动包含等行为。没有 hasLayout 的块级元素，即使子元素浮动了，父容器高度仍为 0 —— 这正是 clearfix 要解决的问题。
立即学习“前端免费学习笔记（深入）”；
-
::before的display: table是最稳妥的触发方式（比zoom: 1更干净，且不影响其他样式） - 不能省略
content: ""，否则 IE6/7 不生成该伪元素，hasLayout 不会被激活 - 不需要给
::before加clear: both，加了也没用，位置在内容前，对后续浮动无效
现代项目还用双伪元素吗？
基本不用。除非你明确要支持 IE6/7（2026 年已极罕见）。主流方案已转向更轻量、语义更清晰的方式：
- 直接用
display: flow-root—— 一行创建 BFC，无副作用，但 Safari ≤15.4 和所有 IE 不支持 - 只用
::after，配display: table或display: block，覆盖 Chrome/Firefox/Safari ≥12 - Flex/Grid 容器天然形成 BFC，根本不需要 clearfix —— 这才是现在最该优先考虑的布局方式
容易踩的坑：伪元素写错位置或漏属性
最常见的失效不是语法错，而是漏掉关键组合项。伪元素必须同时满足三个条件才有效：
-
content属性不能为空字符串以外的值（比如content: " "中间有空格，某些旧引擎会当非空内容处理，导致高度异常） -
display必须是块级（block）或表格（table），inline默认值无法触发 clear 行为 -
clear: both只对::after有意义；放在::before上等于没写，还可能干扰布局
真正麻烦的从来不是怎么写，而是忘了不同浏览器对同一段 CSS 的解析差异有多大 —— 尤其当你接手一个十年前的老项目时，::before 那行代码很可能就是某位前辈留给 IE6 的最后一句遗言。
