浮动层遮挡按钮的本质是float导致父容器高度塌陷，使后续元素margin或渲染边界上移而物理覆盖按钮hit area，并非z-index不足；需通过BFC（如overflow: hidden或display: flow-root）修复塌陷，或改用Flex布局。
浮动层遮挡可点击区域，本质是 float 导致父容器高度塌陷，后续元素的 margin 或自身渲染边界向上/向左延伸，物理覆盖了目标按钮的 hit area——这不是 z-index 不够高，而是布局失控。
为什么 float 元素会“隐形盖住”按钮
浮动元素脱离标准流，但它的 margin 仍参与层叠计算；更关键的是，若父容器未清除浮动，高度坍缩为 0，后续兄弟元素（比如设置了 margin-top: 100px 的 <div class="col text-center">）会从文档流顶部开始定位，其整个盒模型（含透明 margin）在 z 轴上压住下方浮动按钮的右半区域。
<ul>
<li>用开发者工具悬停按钮，高亮框被中途截断或跳转到其他元素 → 基本确认遮挡</li>
<li>临时加 <code>outline: 2px solid red 到疑似遮挡元素，快速暴露覆盖范围
float: right 搭配 position: relative 是高危组合：既不解决塌陷，又可能意外创建新的层叠上下文清除浮动不是万能解法，但必须做
仅靠 clear: both 可缓解，但治标不治本。它只让下一个元素“避开浮动”，不修复父容器高度缺失问题，且易在响应式中失效。
- 给浮动按钮的直接父容器加
overflow: hidden或display: flow-root（推荐）→ 触发 BFC，自动包裹浮动子项 - 若需兼容旧浏览器，用 clearfix 伪元素：
.clearfix::after { content: ""; display: table; clear: both; } - 别把
clear: both加在按钮自己身上——它清的是前面的浮动，对后面元素无效
彻底替换 float：用 Flexbox 控制对齐
Bootstrap 5+ 已弃用 float 做布局，现代方案是用 d-flex 容器 + ms-2 等间距工具类，语义清晰、无塌陷风险、响应式友好。
立即学习“前端免费学习笔记（深入）”；
- 把输入框和按钮包进
<div class="d-flex">，按钮加 <code>ms-2或me-auto实现右对齐 - 移除所有
float: right、float: left和配套的clear代码，避免干扰 - Flex 容器默认
align-items: stretch，按钮与 input 高度自动对齐，无需额外 hack - 检查遮挡元素是否设置了
position: relative/absolute/fixed+z-index—— 它可能已创建新 stacking context - 按钮自身若没设
position（哪怕只是position: relative），z-index直接被忽略 - 优先用布局修复（Flex / BFC），而非堆 z-index —— 数值再大也救不了塌陷的父容器
z-index 无效时先检查 stacking context
给按钮设 z-index: 9999 却没用？大概率是它和遮挡元素同属一个层叠上下文，z-index 只在同级上下文中生效。
真正难的不是写对一行 CSS，而是意识到：按钮点不了，90% 不是 JS 绑错了事件，而是你正站在一个塌陷的盒子上，试图用 z-index 往空气里盖楼。
