浮动元素被遮挡主因是父容器未清除浮动导致布局塌陷，应触发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 和字体大小归零防间隙
