浮动元素不参与z-index层叠，必须配合position属性（如relative）才能生效；其层叠顺序仅由文档流位置和脱离状态决定，与z-index无关。
浮动元素不参与z-index层叠上下文
默认状态下，float 元素不会创建新的层叠上下文，也不受父容器 z-index 控制——哪怕你给它加了 z-index: 999，只要没同时设 position（非 static），这行代码就完全无效。
常见错误现象：div 设了 float: left 和 z-index: 10，结果被后面普通文档流里的 h2 盖住；或者两个浮动块重叠时，后写的反而在前——这不是 bug，是规范行为。
- 浮动元素的层叠顺序只由「文档流位置」和「是否脱离文档流」决定，跟
z-index无关 - 想用
z-index，必须搭配position: relative（或absolute/fixed）使用，float和position可共存，但float不再起定位作用 - 如果只是为了布局对齐，现代项目优先用
display: flex或display: grid替代float，避免这类隐性冲突
浮动元素之间的重叠顺序取决于HTML顺序和float方向
两个同向浮动的块（比如都 float: left），谁写在 HTML 前面，谁更靠左/上；若发生垂直方向重叠（比如高度不一致导致错位），先出现的元素会“垫底”，后出现的覆盖其上——这是由浮动的渲染机制决定的：浏览器按顺序把元素逐个“推”进浮动流，不回溯调整层叠。
使用场景：老式多栏布局、文字环绕图片。但要注意，这种顺序依赖非常脆弱——换一行 HTML 就可能翻车。
立即学习“前端免费学习笔记（深入）”；
-
float: left元素从左到右依次排列；float: right从右到左；左右混用时，顺序更难预测，尤其在响应式断点处 - 没有清除浮动（
clear）时，后续浮动元素可能卡在前一个未闭合的浮动块下方，形成意外遮挡 - 不要指望用
margin-top调整浮动元素的“上下层关系”，它只影响位置，不改变层叠顺序
浮动元素与非浮动元素的层叠规则很直接
非定位的普通块级元素（position: static）永远在浮动元素之上渲染——不是因为“层级高”，而是因为浮动元素被当作“行内盒子”挤出正常流，而普通块仍占据文档流位置，自然压在浮动内容上。
典型错误：给图片加 float: left 让文字环绕，结果发现标题 h1 直接盖住了图——没错，这就是预期行为。不是 CSS 失效，是它本来就这样工作。
- 想让非浮动元素“沉底”到浮动元素下面？加
clear: both - 想让非浮动元素“浮在上面”？不行，除非它自己也变成定位元素（
position: relative+z-index） - 浮动元素的
background-color和border会显示，但它的层叠层级始终低于后续的静态块级元素，无论 DOM 顺序如何
真正需要z-index时，放弃float，改用position+transform
如果你正在调试一个“明明写了z-index却不管用”的浮动布局，大概率该重构了。现代浏览器中，float 已退化为文本环绕专用工具，复杂层叠需求请交给 position 或 transform。
性能影响：浮动本身开销小，但配合 clear 或频繁重排（如动态插入浮动元素）会触发整行重绘；而 position: absolute + z-index 是明确可控的层叠模型，GPU 加速也更友好。
- 替代方案示例：
div { position: relative; } img { position: absolute; top: 0; left: 0; z-index: 1; } - 如果只是想实现响应式侧边栏，
display: flex配合order更可靠，且完全规避层叠问题 - 注意：
transform: translateZ(0)也能强制创建层叠上下文，但它不解决浮动本身的语义混乱，只是绕过问题——不如直击根源
浮动和 z-index 的矛盾，本质是两种布局范式的冲突：一个是为印刷排版设计的、隐式层叠的流动模型；一个是为 UI 控制设计的、显式层级的定位模型。混用它们，等于一边用算盘一边写 Python——能跑，但没人这么干。
