浮动元素覆盖非浮动元素不是z-index失效，而是因脱离文档流形成“悬浮图层”，不参与层叠上下文计算；替换元素如img、input因渲染引擎特殊保护机制自动绕排，不被覆盖。
浮动元素覆盖非浮动元素，不是 z-index 失效，而是它根本没进同一个层叠上下文——它压根不在“层叠”这件事的讨论范围内。
float 元素脱离文档流后，视觉上“浮”在哪儿？
浮动元素（如 float: left）会从正常文档流中完全移出，浏览器渲染时把它当作一个“悬浮图层”，但这个图层不参与标准的 stacking context（层叠上下文）计算。它不像 position: relative 或 position: absolute 那样能靠 z-index 显式排序。
所以你给浮动元素加 z-index: 999 是无效的——除非同时加 position: relative（且该元素已触发新的层叠上下文），否则 z-index 被忽略。
此时它和后面未浮动的 div 的关系是：后者仍按原位置渲染（以为浮动元素还占位），而前者已“飘”上去，造成覆盖。这不是层级高，是布局错位。
立即学习“前端免费学习笔记（深入）”；
为什么 img、input 这些元素不会被 float 盖住？
因为它们是替换元素（replaced elements），浏览器对它们有特殊处理逻辑：
- 行内替换元素（如
img、input、button）默认参与行框（line box）布局，文字会自动绕开浮动区域，它们本身也被“推”到可用空间里 - 这种绕排不是靠
z-index，也不是 BFC，而是渲染引擎内置的文本流对齐规则 - 一旦你给
img加了position: absolute或transform，它就退出这个保护机制，立刻可能被浮动元素遮挡
clear 和 overflow: hidden 到底在解决什么？
两者都不是在“调层级”，而是在修复布局流断裂：
-
clear: both加在非浮动元素上，是命令它“下移到所有浮动元素下方”，本质是重置它的垂直位置，不是抬高层级 -
overflow: hidden（或display: flow-root）作用于父容器，是让它触发 BFC，强制包含浮动子项，从而恢复高度并让后续兄弟元素不再“顶上来” - 误用
overflow: hidden可能裁剪 tooltip、下拉菜单等绝对定位内容；display: flow-root更安全，但 IE 完全不支持
想真正控制谁在上面，别硬凑 float + z-index
浮动本就不为分层设计。真要叠加控制，得切换布局模型：
- 把需要分层的元素改成
position: relative或position: absolute，再配z-index - 例如头像左浮动 + 文字环绕，同时右上角放操作按钮：按钮必须设
position: absolute; top: 0; right: 0; z-index: 2，不能依赖 float 排序 - 响应式下尤其危险：浮动元素在窄屏换行后，原本的左右关系彻底失效，
z-index更无从谈起
最常被忽略的，是浮动与替换元素之间那层隐性的渲染契约——它不写在规范里，但所有主流引擎都遵守。一旦打破（比如加 transform），覆盖就立刻发生，而且毫无预警。
