display: none 会彻底移除浮动元素，不占空间且父级高度不被撑开；而 visibility: hidden、opacity: 0、transform 等仅隐藏视觉效果，仍占据布局位置。
浮动元素被 display: none 隐藏后，**不会占据任何空间，父级高度也不会被撑开**——如果你观察到“仍占高度”，那它根本没被真正隐藏，大概率是用了 visibility: hidden、opacity: 0 或 transform: scale(0) 这类“假隐藏”手段。
display: none 和 visibility: hidden 的区别很关键
这是最常混淆的点。两者行为完全不同：
-
display: none：元素彻底从文档流中移除，不参与布局计算，父容器完全“看不见”它，高度自然不被撑开 -
visibility: hidden：元素还在文档流里，只是不可见，依然占据物理位置和尺寸，父容器照常计算它的 margin/padding/border/height —— 所以高度还在
检查你用的是哪个。打开开发者工具，看 computed 样式里的 display 值是不是 none；如果不是，哪怕 DOM 上写了 style="visibility:hidden"，父容器高度塌陷问题就根本没解决，只是视觉上“看不见”了。
opacity: 0 和 transform 不会触发重排，但会保留布局占位
这类 CSS 属性只影响渲染层（paint），不影响布局层（layout）：
-
opacity: 0：透明但仍在文档流中，float 元素照样脱离普通流，父容器依旧无法感知其尺寸 -
transform: translateY(-100%)或scale(0)：元素被移动或缩放，但原始 layout box 依然存在，父容器按原尺寸计算高度 - 即使加了
will-change: transform或backface-visibility: hidden，也改变不了这个事实
换句话说：只要没删掉元素，也没设 display: none，它就还在那里“占坑”，父容器该塌陷还是塌陷（如果它是 float），该撑高还是撑高（如果它不是 float 但有 height）。
浮动元素 + visibility: hidden 是“双重失效”的典型场景
很多人想“先隐藏再显示”，于是给浮动子项加 visibility: hidden，结果发现父容器高度还是 0 —— 这其实是两个问题叠加：
- 浮动本身已让父容器无法感知子项高度（脱离文档流）
- 再加上
visibility: hidden，子项虽然不可见，但 float 行为照旧，父容器更看不到它了
此时哪怕你后续用 JS 切回 visibility: visible，父容器也不会自动重算高度，除非你手动触发重排（比如改 class、读 offsetHeight），或者用 display: none → display: block 切换。
真正要隐藏并释放高度，只有一条路
必须用 display: none，且确保它生效：
- 不要被父级的
display: flex或display: grid干扰：在这些容器里，float本就失效，display: none会直接移除元素，高度立刻释放 - 注意 CSS 优先级：如果其他规则把
display覆盖成block或inline，display: none就白写了 - 慎用
!important强行覆盖，容易掩盖真实冲突点；优先用更具体的 selector
最后提醒一句：现在还用 float 做布局的场景越来越少了。如果只是为了“隐藏/显示切换”，直接用 display: none + display: block 最可靠；如果是为了动画过渡，别硬套 float，改用 max-height、clip-path 或现代动画属性更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
