浮动元素“看不见”通常因visibility/opacity隐藏、父容器塌陷、flex/grid中float被忽略或clear失效；需依次检查computed样式、父容器高度与display值、html结构及clear应用位置。
浮动元素“看不见”但 computed 样式里有，先查 visibility 和 opacity
浮动本身不会让元素消失，但常被连带设置的隐藏属性掩盖。打开开发者工具，选中该元素，在 Computed 面板里直接搜 visibility 和 opacity：
-
visibility: hidden：元素占位但不可见，检查是否被父级 class 或全局 reset 覆盖 -
opacity: 0或极低值（如opacity: 0.01）：元素仍可响应 hover/click，容易误判为“没渲染” - 注意 CSS 动画或 JS 逻辑中临时写入的
opacity，比如 fade-out 过程中还没清掉内联样式
父容器高度为 0px？那是塌陷，不是消失
浮动元素脱离文档流，父容器无法感知其存在，导致 height 计算为 0px——背景、边框、padding 全部失效，看起来像“不见了”。确认方式很直接：
- 在 Elements 面板中选中父容器，看 Computed →
height是否为0px - 临时加一句
border: 1px solid red，若只看到一条线或无反应，基本就是塌陷 - 鼠标悬停浮动子元素，看是否触发
:hover样式——能触发，说明它真在那儿，只是父容器没高度
父容器用了 display: flex 或 display: grid？float 已被忽略
Flex/Grid 容器中，子元素的 float 属性不参与布局计算，computed 值会显示为 none。这不是 bug，是规范行为：
- 检查父容器的 Computed
display值，如果是flex或grid，那float就不起作用 - 文字绕图、侧栏布局等依赖 float 的效果，必须改用
shape-outside或重构 HTML 结构 - 别在 flex 容器里硬套 float，排查时优先确认父级 display 类型，比调子元素更高效
清除浮动写错位置，clear 根本没生效
clear 不是加给浮动元素自己，而是加在它**后面第一个非浮动的块级兄弟元素**上：
- 检查 HTML 结构：浮动元素后有没有紧邻的
<div>、<code><p></p>等块级元素？没有就无处可清 - 确认该兄弟元素的 Computed
clear值是否为both，而不是被其他规则覆盖成none - 如果它是
display: inline或inline-block，clear无效——必须是块级 - 结构不支持插 clear 元素时，直接给父容器加
display: flow-root，比伪元素 hack 更干净
真正难定位的是多种原因叠加：比如 opacity: 0 + 父容器塌陷 + 父级又设了 overflow: hidden，结果既看不到内容，也看不到容器边框，连审查工具都得层层关样式才能揪出问题。动手前先分清——是元素没渲染，还是渲染了但被藏起来了。
