z-index对float元素无效是因为只有定位元素（position非static）才能创建层叠上下文，浮动元素需配合position: relative等才能使z-index生效。
当使用 float 进行布局时，元素脱离文档流，容易导致视觉上的重叠。而 z-index 通常用于控制层叠顺序，但它在某些情况下对浮动元素无效。理解两者的交互机制是解决重叠问题的关键。
为什么 z-index 对 float 元素有时无效？
z-index 只在定位元素（即 position 值为 relative、absolute、fixed 或 sticky）上生效。普通浮动元素即使设置了 z-index，也不会产生预期的层叠效果。
要让 z-index 生效，必须同时满足两个条件：
- 设置 position 属性为非 static
- 设置 z-index 值
例如：
立即学习“前端免费学习笔记（深入）”；
.floating-box {
float: left;
position: relative; /* 关键：启用定位上下文 */
z-index: 2;
background: #00b3ff;
}
解决浮动元素重叠的实践方法
当多个浮动元素发生重叠时，可通过以下方式控制显示层级：
- 结合 float 与 position：给需要提升层级的浮动元素添加 position: relative 和合适的 z-index。
- 避免过度浮动：现代布局推荐使用 Flexbox 或 Grid，减少 float 带来的复杂性。
- 清除浮动影响：使用 clearfix 技术防止父容器塌陷，间接避免布局错乱引发的重叠。
clearfix 示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
浮动与层叠上下文的关系
每个设置了 position 且 z-index 不为 auto 的元素会创建新的层叠上下文。子元素的 z-index 在该上下文中独立计算。
这意味着：
- 一个低 z-index 的父容器，其内部高 z-index 子元素仍可能被外部高 z-index 元素覆盖。
- 浮动元素若未形成层叠上下文，其堆叠顺序将受周围定位元素影响。
实践中，若需精确控制重叠，建议：
- 统一使用定位布局替代纯浮动
- 必要时保留 float 但配合 position 和 z-index 精细调整
基本上就这些。关键点在于：float 不触发层叠控制，只有定位元素才能用 z-index 管理层级。
