visibility: hidden用于隐藏伪元素但保留文档流位置，防止其因默认样式或事件响应干扰布局；它不用于清除浮动，而是消除空伪元素的副作用，如空白、点击错位等。
visibility: hidden 是为了隐藏伪元素但保留文档流位置
它不是用来“清除”浮动的，而是防止 ::after 生成的内容意外干扰布局或交互。伪元素即使内容为空（content: ""），在某些浏览器中仍可能渲染出不可见但可响应鼠标事件的占位框，或者因默认样式（比如 line-height）撑开空白行。
常见错误现象包括：父容器底部多出几像素空白、点击区域错位、缩放后布局抖动。这些都不是 clear: both 失效导致的，而是伪元素“看得见却摸不着”的副作用。
-
visibility: hidden让元素不可见 + 不响应鼠标事件，但仍在文档流中占位 —— 这是它和display: none的关键区别 - 只靠
height: 0不够：有些浏览器（如旧版 Firefox）对空content仍会按最小行高渲染，height: 0压不住，必须配合visibility: hidden - 现代写法中，用
display: table替代display: block可天然规避line-height干扰，此时visibility: hidden和height: 0都可省略
为什么不能只用 opacity: 0 代替 visibility: hidden？
opacity: 0 只是让元素完全透明，它依然捕获鼠标事件、参与重排计算、可能触发合成层 —— 在需要“彻底隐身且不干扰”的场景下，它不如 visibility: hidden 可靠。
尤其当伪元素被嵌套在有 pointer-events: none 或复杂 z-index 层级的容器里时，opacity: 0 容易引发意外交互行为，而 visibility: hidden 明确切断了事件传递链。
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden会阻止子元素显示（除非子元素显式设为visibility: visible），而opacity: 0不影响子元素的可见性或事件穿透 - 部分屏幕阅读器对
visibility: hidden的语义处理更一致；opacity: 0可能仍被读取 - 动画性能上，
visibility切换不触发布局（layout）或绘制（paint），仅影响合成（composite）；opacity动画虽也走合成，但初始状态仍可能引发重排抖动
现代替代方案里 visibility: hidden 还有必要吗？
如果你改用 display: flow-root，那整个 clearfix 模式就废弃了 —— 此时不需要伪元素，自然也不需要 visibility: hidden。
但如果还在维护老项目、需兼容 IE11 或某些定制内核（如早期 WebView），display: flow-root 不可用，就必须回到伪元素方案。这时 visibility: hidden 和 height: 0 是一对绑定操作，漏掉任一个，在缩放、打印、高 DPI 设备或 CSS 自定义属性动态注入场景下都可能暴露问题。
-
display: table是更轻量的替代：它自带 BFC、无默认行高、不依赖visibility或height就能安全清除浮动 - 调试时直接在开发者工具里检查
::after节点的 computed 样式，确认visibility真的生效，且没被其他规则（比如全局重置样式）覆盖 - 注意：某些 CSS-in-JS 库或 PostCSS 插件会自动删掉“冗余”声明，
visibility: hidden有时被误判为可删，要留心构建产物
visibility: hidden 只是这个目标下，为伪元素扫清副作用的一块垫脚石 —— 它不解决核心问题，但缺了它，问题会以更隐蔽的方式复现。 
