浮动元素被遮挡主因是父容器未清除浮动导致布局塌陷，应触发BFC（如overflow:hidden或display:flow-root）或伪元素清除；多浮动元素重叠需检查尺寸与box-sizing；z-index对float无效，应改用position；推荐Flex/Grid替代浮动。

浮动元素被遮挡，最常见的原因是父容器没有清除浮动，导致后续元素“塌陷”进浮动区域，视觉上看起来像被遮挡了。这不是z-index或层叠上下文问题，而是文档流错乱造成的布局异常。

检查父容器是否触发BFC或清除浮动

浮动元素会脱离正常文档流，如果父容器没有形成BFC（块级格式化上下文）或未清除内部浮动，高度会坍缩为0，导致后面的兄弟元素向上“贴”过去，覆盖在浮动元素下方——看似遮挡，实则是布局塌陷。

• 给父容器加 overflow: hidden、overflow: auto 或 display: flow-root（推荐），强制触发BFC，包裹住浮动子元素
• 用伪元素清除浮动：.parent::after { content: ""; display: table; clear: both; }
• 避免只对浮动元素自身加 clear: both，它只影响该元素的上下边距，不解决父容器塌陷

确认遮挡是否来自同层浮动元素相互覆盖

多个浮动元素在同一行排布时，若总宽度超容器，后浮动元素可能被挤到下一行，并因高度差异与前一个浮动元素重叠。

• 检查浮动元素的 width + margin + padding + border 是否超出父容器宽度
• 给浮动元素统一设置 box-sizing: border-box，避免尺寸计算偏差
• 必要时用 float: none 临时关闭某个浮动，观察布局是否恢复正常，快速定位冲突源

排除z-index误用导致的视觉遮挡

如果确实涉及层叠，注意：浮动元素默认属于普通流，z-index 只对定位元素（position ≠ static）生效。给浮动元素加 z-index 不起作用。

• 想控制层叠顺序，应改用 position: relative 配合 z-index，而非依赖 float
• 检查是否有其他已定位元素设置了高 z-index，意外盖住了浮动内容
• 用浏览器开发者工具的“Layers”面板或勾选“Show layout shifts”，直观查看渲染层关系

现代替代方案：优先考虑Flex或Grid布局

浮动本就不是为复杂布局设计的，仅适用于文字环绕等简单场景。长期维护中，浮动易引发连锁塌陷问题。

• 横向排列用 display: flex，无需清除，自动分配空间
• 网格布局用 display: grid，精准控制行列与重叠
• 如需兼容老浏览器，可用 display: inline-block 替代 float，配合 vertical-align 和字体大小归零防间隙