visibility:hidden在现代清除浮动中非必需，仅为修复ie6/7渲染bug的冗余补丁；真正起作用的是content:""触发伪元素生成，配合display:block和clear:both实现清除，其余均为历史包袱。
visibility:hidden 在现代清除浮动场景中，不是必需项，也不起清除作用——它只是旧版 IE（IE6/7）渲染 bug 的临时补丁，现在留着反而容易误导人。
为什么老写法总带 visibility:hidden
IE6/7 在 display: block + height: 0 组合下，仍会渲染出不可见但占高度的空白行；visibility:hidden 是为压住这个 bug，不是为了“隐藏内容”。现代浏览器（Chrome/Firefox/Safari/Edge/IE8+）完全不需要它。
常见错误现象：复制网上老代码时照搬 visibility:hidden，结果发现可访问性变差（屏幕阅读器仍读取伪元素）、CSS 可维护性下降、还可能误以为它是清除逻辑的一部分。
-
content: ""才是关键：没有它，::after根本不生成，clear: both失效 -
display: block（或table/flow-root）必须存在：内联伪元素无法触发清除行为 -
clear: both必须写在伪元素上，且该元素得是块级框
visibility:hidden 留着有什么实际影响？
它不会破坏清除效果，但会带来隐性成本：
- 可访问性隐患：
visibility:hidden不阻止屏幕阅读器读取内容，而content: ""本身无文本，更干净 - 维护负担：团队新人看到它，容易误以为“必须加”，或纠结要不要配
font-size: 0、line-height: 0等冗余声明 - 兼容性已无意义：IE6/7 市场份额归零，
*zoom: 1同样可删（除非你还在维护 2010 年的老系统）
现代推荐写法（无 visibility:hidden）
最简可靠版本：
.clearfix::after {
content: "";
display: block;
clear: both;
}
如果父容器需要 BFC 隔离（比如防止 margin collapse 或 float 泄漏），直接用 overflow: hidden 或 display: flow-root 更直白，比伪元素更少歧义。
双伪元素写法（::before + ::after）也无需 visibility:hidden，display: table 已足够触发 BFC 且无渲染副作用。
真正要盯住的只有三件事：content: ""、display: block（或等效替代）、clear: both。其余都是历史包袱，删掉更安心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
