z-index对浮动元素无效，因其仅作用于定位元素；应使用clear属性避开浮动，或改用flex/grid布局。
浮动元素遮挡其他内容，z-index 为什么无效
因为 z-index 只对「定位元素」（position 值为 relative、absolute、fixed 或 sticky）生效，而浮动元素（float: left/right）本身不创建层叠上下文，也不受 z-index 控制。强行给浮动元素加 z-index 不会改变堆叠顺序，只会让它在视觉上“看起来”被遮挡或错乱。
真正该用 clear 的场景和写法
clear 是专门用来处理浮动溢出和布局干扰的属性，它让元素避开前面浮动元素占据的水平空间。
-
clear: left：避开左侧浮动元素 -
clear: right：避开右侧浮动元素 -
clear: both：同时避开左右两侧浮动元素（最常用） - 通常加在浮动元素之后的「普通流元素」上，比如导航栏后面的内容区、文章正文、页脚等
.main-content {
clear: both;
}
更现代、更可靠的替代方案
浮动本就不是为复杂布局设计的，现在主流做法是放弃 float 布局，改用：
-
display: flex：父容器设display: flex，子项自动排列，无需清除浮动 -
display: grid：适合二维布局，彻底绕过浮动相关问题 -
overflow: hidden或overflow: auto（仅用于触发 BFC）：可让父容器包裹浮动子项，但不解决兄弟元素被遮挡问题
注意：overflow 触发 BFC 虽能防止父容器塌陷，但无法控制后续兄弟元素是否被浮动元素覆盖——这点常被误用。
调试时容易忽略的关键点
浮动遮挡问题往往不是单一原因，排查时要确认：
- 被遮挡元素是否意外设置了
position: relative且没配z-index？这会让它进入新层叠上下文，反而被浮动元素盖住 - 浮动元素是否设置了负
margin或transform，导致视觉位置偏移超出预期 - 是否存在多个嵌套浮动，而只在最外层用了
clear？必须确保每个需要避开浮动的元素都正确应用clear
浮动的“传染性”很强，一个没清干净，后面一串布局都会错位——别指望靠 z-index 补救，该清的地方就得清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
