visibility:hidden在clearfix中仅为修复IE6/7渲染bug，并非语义隐藏；content:""才是触发伪元素参与布局的关键，配合display:block和clear:both实现清除浮动，其余均为历史冗余。
visibility:hidden 在 clearfix 中根本不是为了“隐藏内容”
它出现在老式写法里，是因为某些旧版 IE（尤其是 IE6/7）在 height: 0 + display: block 的组合下，仍会渲染出不可见却占高度的空白行——visibility: hidden 是为压住这个渲染 bug，不是语义上“隐藏伪元素内容”。现代浏览器完全不需要它。
content: "" 才是真正起作用的触发点
content 属性决定伪元素是否被渲染：空字符串 "" 足够让 ::after 存在并参与布局；而 content: none 等价于没写，伪元素直接不生成，clear: both 就彻底失效。
-
content: "."会真实渲染一个点，必须额外加visibility: hidden或font-size: 0避免视觉污染 -
content: ""是最干净的选择，无需隐藏，也无字体/行高干扰 - IE8+ 支持
::after，老项目可用:after（单冒号）保底
display: block 和 clear: both 缺一不可
clear: both 只对块级框生效；如果伪元素保持默认 display: inline，即使写了 clear，它也不会推开浮动元素——因为内联框不参与清除逻辑。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
display: inline-block不行：仍是行内级，clear无效 -
display: table更稳妥：兼容 Safari 5.1 等旧版本对block的渲染异常 -
display: flow-root是现代首选：一行解决，天然创建 BFC，无需伪元素和content
加 visibility:hidden 反而带来可访问性风险
屏幕阅读器仍会读取 visibility: hidden 元素的内容（哪怕视觉不可见），而 content: "" 本就不含文本，更干净。更重要的是，这个属性在当代所有主流浏览器中都不再影响渲染行为——留着它，只会在代码里埋下一个“看起来有用、实则多余、还可能误导人”的隐患。
立即学习“前端免费学习笔记（深入）”；
真正该盯住的只有三样：content: ""、display: block（或 table / flow-root）、clear: both。其余全是历史包袱。
