输入框无法聚焦是因视觉遮挡、事件拦截或父容器塌陷，需分三步修复：清除浮动、启用定位与层级、验证落点；仅靠单一属性无法根治。
输入框无法聚焦，不是它自己“失能”，而是被视觉遮挡、事件拦截，或父容器塌陷导致点击根本落不到它身上——浮动只是触发问题的表层操作。
检查父容器是否塌陷导致点击区域消失
浮动会让 input 脱离文档流，若其直接父容器没清除浮动，高度常坍缩为 0。你看到的输入框只是“悬空渲染”，getBoundingClientRect() 返回的 height 或 offsetHeight 可能是 1px 甚至 0。
- 用 DevTools 选中该
input，在右侧面板查看Computed中的height和offsetHeight - 临时给父容器加
outline: 2px solid red，观察红色边框是否包裹住整个可交互区域；不包，就是塌陷 - 别用
overflow: hidden强行“撑高”——它可能裁掉:focus的轮廓线或下拉菜单，掩盖真实问题
确认 z-index 是否真正生效
直接给 input 或浮动容器写 z-index: 999 完全无效，因为 z-index 只对已定位元素（position 为 relative、absolute、fixed 或 sticky）起作用。浮动元素默认是 position: static，声明会被忽略。
- 必须先加
position: relative（哪怕不偏移），再设z-index，例如：input { position: relative; z-index: 2; } - 检查祖先元素是否创建了新层叠上下文：如
opacity: 0.99、transform、will-change—— 一旦存在，子元素的z-index就被锁死在内部，再高也没用 - 注意伪元素（如
::before）或父容器是否设置了pointer-events: none，它可能静默拦截点击
验证焦点是否真能落到该 input 上
:focus 样式不生效，未必是 CSS 写错，很可能是 input 根本没获得焦点。常见干扰包括 disabled、readonly、tabindex="-1" 错位，或 JS 主动调用 blur()。
- 用 DevTools 点击输入框后，看 Styles 面板中
:focus是否出现在伪类列表里（打勾状态） - 临时移除所有自定义 CSS，只保留
input:focus { outline: 2px solid red; }测试基础行为 - 检查是否有 JS 监听
focusin或focus并调用了event.preventDefault()或element.blur() - 移动端（尤其 iOS Safari）需确保页面未禁用缩放（
user-scalable=no），否则部分机型会抑制:focus触发
修复必须分三步走：清除 + 定位 + 验证
单靠一个属性“蒙混过关”只会让问题更隐蔽。真正可靠的路径是恢复文档流、明确层级归属、用工具确认事件落点是否对齐。
- 清除浮动：精准加在
input的**紧邻父容器**上，推荐.input-group::after { content: ""; display: table; clear: both; }；现代项目可用display: flow-root - 启用定位与层级：给
input自身或其**紧邻包装容器**加position: relative和合理z-index（如2），确保高于浮动兄弟元素 - 验证落点：执行
console.log(input.getBoundingClientRect())打印坐标；再打开 DevTools →Rendering→ 勾选Paint flashing，点击时看红色闪动是否精准覆盖输入框——这是最容易被跳过的环节，也是“假修复”的重灾区
最常被忽略的是：修复后不做 getBoundingClientRect() 和 Paint flashing 验证。很多“点得中了”的判断，只是肉眼错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
