浮动元素不受z-index控制，因其非定位元素且不创建层叠上下文；z-index仅对position为relative/absolute/fixed/sticky的元素生效；混用float与position: relative时，起效的是定位属性而非浮动。
浮动元素本身没有独立的层叠上下文，所谓“层级更高”是渲染顺序 + 背景缺失 + BFC 缺失共同导致的视觉假象，不是真实 z-index 层级提升。
浮动元素根本不受 z-index 控制
给 float: left 的元素设置 z-index 完全无效，因为 z-index 仅对 position 为 relative、absolute、fixed 或 sticky 的元素生效。浮动是一种布局行为，不是定位模式。
-
.box { float: left; z-index: 999; }→z-index被浏览器静默忽略 -
.box { float: left; position: relative; z-index: 999; }→ 此时起效的是position: relative，不是float - 若父容器已隐式创建层叠上下文（如设置了
opacity: 0.99），子元素的z-index只在该上下文中比较，无法越级覆盖外部元素
浮动在默认层叠顺序中位置靠前
浏览器按固定顺序绘制同一层叠上下文内的元素，浮动盒子（float）的层叠级别高于普通块级盒子（block-level box），但低于行内盒子和定位元素。
- 层叠顺序（由低到高）：父背景/边框 → 负
z-index元素 → 普通块级元素 → 浮动元素 → 行内元素 →z-index: 0元素 → 正z-index元素 - 这意味着：两个同级兄弟元素，
float: left的<div>会视觉上“盖住”后面紧邻的非定位<div>，尤其当后者没设background时更明显 - 但文字内容（行内盒）仍会绕流显示在浮动元素右侧，不会被遮挡——这进一步说明不是“层级压倒”，而是绘制顺序与盒模型行为差异
为什么 overflow: hidden 看起来“压住”了浮动？
它没改变层级，只是触发了 BFC（块级格式化上下文），让父容器把浮动“包含”起来，从而阻止浮动盒与后续流内元素的边界重叠。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden、display: flow-root、float、position: absolute都能触发 BFC -
display: flow-root更推荐：语义清晰，且无overflow: hidden可能意外裁剪内容的风险 - BFC 不影响层叠上下文本身，但它强制内部浮动不参与外部流的布局计算，视觉上就不再“穿透”出界
真正要控制覆盖关系，得从层叠上下文结构入手，而不是调 float 或盲目加 z-index；最容易被忽略的是祖先链中某个 opacity、transform 或 will-change 已悄悄创建了新层叠上下文，让所有子元素的 z-index 失去跨上下文竞争能力。
