visibility: hidden 能保留布局空间，因为它仅隐藏元素视觉呈现而不脱离文档流，仍参与盒模型计算、占据位置并影响父容器高度与兄弟元素排版，与 display: none 的彻底移除有本质区别。
visibility: hidden 为什么能保留布局空间
因为 visibility: hidden 只是让元素「不可见」，但不改变文档流——它依然参与盒模型计算、占据原有位置、影响父容器高度和兄弟元素排版。这和 display: none 的彻底移除有本质区别。
- 常见错误现象：
display: none后父容器突然塌陷，相邻浮动元素往上跑，表单布局错乱 - 使用场景：需要临时隐藏但保持交互区域或动画占位（比如悬停展开前的折叠面板、加载中的按钮占位）
- 性能影响：比
display: none略高一点（浏览器仍需布局和绘制该元素，只是跳过绘制像素），但远低于强制重排
浮动元素 + visibility: hidden 的实际表现
浮动元素设为 visibility: hidden 后，它依然“浮着”，仍会挤压正常流内容，父容器也能正确包裹它（前提是父容器触发了 BFC 或有清除浮动机制）。这点常被误认为失效，其实是清除逻辑没跟上。
- 容易踩的坑：父容器没清除浮动，导致后续内容上移，误以为
visibility失效；其实浮动框还在，只是看不见了 - 验证方法：用开发者工具选中该元素，看
box model是否仍在原位、尺寸是否准确 - 兼容性：所有现代浏览器都支持，IE6+ 也完全没问题
和 opacity: 0 对比的关键差异
opacity: 0 虽然也“看不见”，但它仍响应鼠标事件（除非加 pointer-events: none），而 visibility: hidden 默认就禁用交互，且不会触发 transition 动画的重绘起点（opacity 会）。
- 参数差异：
visibility是离散值（visible/hidden/collapse），不能过渡；opacity是数值型，支持transition - 使用场景选型：要纯占位+禁交互 → 用
visibility: hidden；要渐隐动画+后续可点 → 用opacity: 0+pointer-events: none - 注意：
visibility: hidden会让子元素全部继承隐藏，无法单独让某个子元素显示（visibility: visible可以破除继承，但需显式设置）
清除浮动后 visibility: hidden 仍塌陷？检查父容器 BFC
如果设置了 visibility: hidden 还是出现布局空缺，大概率是父容器没形成 BFC，导致浮动元素脱离父级上下文——此时隐藏的只是“视觉存在”，但父容器根本没把它当自己孩子算高度。
立即学习“前端免费学习笔记（深入）”；
- 实操建议：给父容器加
overflow: hidden、display: flow-root或float: left（任一即可触发 BFC） - 不要依赖
clear: both单独清浮动，它只影响后续兄弟元素，不解决父容器包裹问题 - 示例：
.parent { display: flow-root; }<br>.float-item { float: left; visibility: hidden; }这样父容器高度才稳定
