display: none 会彻底移除浮动元素及其布局影响，导致父容器塌陷和兄弟元素上移；visibility: hidden 仅隐藏内容但保留浮动占位；opacity: 0 在隐藏同时保留布局、交互与浮动行为，推荐用于需平滑过渡的场景。
display: none 会让浮动元素彻底消失，但会破坏文档流
浮动元素（float: left 或 float: right）本身已经脱离了普通文档流，但它的占位和对兄弟元素的影响依然存在。一旦给它加 display: none，它不仅视觉隐藏，连“浮动行为”也一并抹除——父容器会塌陷，相邻元素会立刻上移填补空缺，就像它从来没存在过。
常见错误现象：display: none 后父容器高度变成 0，文字或块级兄弟元素突然跳到顶部，布局完全错乱。
- 适用场景：需要彻底移除浮动元素及其所有布局影响，比如条件性禁用某个侧边栏模块
- 不适用场景：只想临时“看不见”，但仍希望保留原有浮动排版逻辑（例如 hover 展开/收起）
- 注意兼容性：所有现代浏览器都支持，但 IE6–IE7 对
display: none在浮动元素上的表现偶有渲染残留（需配合zoom: 1触发 hasLayout）
visibility: hidden 不影响浮动，但元素仍占位
visibility: hidden 只是让内容不可见，浮动属性照常生效。元素依旧参与浮动计算，父容器不会塌陷，旁边的文字或元素依然被它“推着走”，只是你看不见它。
使用场景：做过渡动画、hover 显示隐藏时想保持布局稳定；或者调试时临时屏蔽某块内容但不想扰动整体排版。
- 浮动元素设为
visibility: hidden后，getComputedStyle(el).float仍是"left"或"right" - 性能影响极小，比
display: none更轻量，因为不触发重排（reflow），只触发重绘（repaint） - 容易踩的坑：误以为“看不见=没影响”，结果发现点击区域还在、键盘焦点还能进入、甚至 SEO 仍可能抓取其内容
opacity: 0 是更安全的视觉隐藏方案
opacity: 0 让元素完全透明，但保留所有布局特性、事件响应和浮动行为。它既不会塌陷父容器，也不会打断兄弟元素的浮动关系，同时还能响应 hover、click 等交互（除非额外加 pointer-events: none）。
适合需要平滑过渡、保留交互能力，又不想改变布局结构的场景，比如下拉菜单淡入、图片加载占位符切换。
- 必须搭配
transition: opacity .2s才有动画效果，否则变化突兀 - IE9+ 支持，IE8 及以下需用
filter: alpha(opacity=0)（已基本可忽略） - 注意：即使透明，屏幕阅读器默认仍会读取内容，如需语义隐藏，得额外加
aria-hidden="true"
用 transform: scale(0) 隐藏浮动元素要格外小心
transform: scale(0) 看似能“缩没”，但它只是视觉缩放，元素仍在文档流中占据原始空间，且浮动行为不受影响——这跟 visibility: hidden 类似，但多了层变换上下文，容易引发层叠上下文（stacking context）问题。
典型问题：缩为 0 后，原本在它后面的元素可能被遮挡，或 z-index 行为异常；某些旧版 Safari 对 scale(0) 下的浮动元素有渲染抖动。
- 如果只是为了隐藏，优先选
opacity: 0，它更可控、副作用更少 - 只有当你明确需要缩放动画（比如按钮点击后收缩消失），才考虑
transform: scale(0) - 务必测试移动端 Safari 和 Chrome for Android，部分版本对
transform+float组合支持不稳定
浮动元素的显示/隐藏不是单纯“要不要看见”的问题，关键在于你是否还想让它继续“推着别的东西走”。display: none 是最狠的断联，visibility: hidden 和 opacity: 0 则各守一边——一个留形不留影，一个留影不留感。实际项目里，多数时候该选 opacity: 0，但别忘了它默认还挂着点击响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
