纯CSS实现浮动标签可行，但需满足三条件：input有非空placeholder、label紧随input后、父容器设position:relative；:not(:placeholder-shown)比:focus关键，因它仅依赖内容是否覆盖placeholder，失焦后仍保持上浮状态。
纯 CSS 实现浮动标签，不依赖 JS 是可行的，但必须满足三个硬性条件：input 有非空 placeholder、label 紧跟在 input 后、父容器设 position: relative；漏掉任意一个，标签就会回落或重叠。
为什么 :not(:placeholder-shown) 比 :focus 更关键
只靠 :focus 写浮动逻辑，用户输完内容点别处，label 立刻掉回框里盖住文字——这不是“浮动”，是“弹跳”。:not(:placeholder-shown) 才真正代表“已输入”状态：只要 input.value 非空，该伪类就生效，且失焦后依然保持。它不关心焦点，只认内容是否把 placeholder 挤没了。
常见错误现象：
-
input的placeholder=""（空字符串）→:placeholder-shown根本不触发，:not(:placeholder-shown)永远为假 -
label放在input前面或隔了其他元素 → 相邻兄弟选择器input + label失效 - 父容器没设
position: relative→label的position: absolute会相对于 body 定位，多个输入框的 label 全堆在左上角
placeholder 必须存在且不能为空格以外的“有效值”？
不是。它只需要“非空字符串”，哪怕只写 placeholder=" "（一个空格）也完全合法且足够触发伪类。但写成 placeholder="" 或直接删掉属性，CSS 就彻底失效。
立即学习“前端免费学习笔记（深入）”；
使用场景差异：
- 想隐藏原生 placeholder 文字？用
::placeholder { opacity: 0; }，别删placeholder属性 - 表单用于编辑页、需 JS 回填数据？填完后必须手动触发
input.dispatchEvent(new Event('input', { bubbles: true }))，否则 CSS 不感知变化 - 用 Bootstrap 5 的
form-floating？它内部也依赖这套逻辑，所以同样要求placeholder非空，且label必须紧跟input
动态填充后标签不上浮？检查这三件事
JS 赋值后标签卡在框内不动，不是 CSS 写错了，是浏览器没收到“输入已发生”的信号。
- 确认是否执行了
input.value = "xxx"，而非仅改input.setAttribute('value', 'xxx')（后者不改变 DOM value） - 赋值后是否调用了
input.dispatchEvent(new Event('input', { bubbles: true }))—— 这是激活:not(:placeholder-shown)的唯一方式 - 如果用 Vue/React 等框架，确保 state 更新后 DOM 已同步；某些异步渲染场景下，需
nextTick或useEffect延迟派发事件
移动端和旧浏览器的兼容性现实
:placeholder-shown 在 iOS Safari 12.2+、Chrome 47+、Firefox 51+ 支持良好，但 IE 完全不支持。如果你的项目仍需兼容 IE11，就得 fallback 到 JS 监听 input 和 blur 事件，手动增删 class 控制 label 位置。
性能提示：
- 别给整个 label 写
transition: all .2s—— 它会让width、height等无关属性也参与过渡，引发 layout thrashing - 只写明确需要的属性：
transition: transform .2s, font-size .2s, opacity .2s -
transform: translateY(-50%)比top: -20px更高效，因为它走的是合成层，不触发重排
最易被忽略的细节：当多个浮动输入框并排（比如姓名/邮箱双列），每个 input + label 组合的直接父级 div 都必须单独设 position: relative。共用一个定位上下文，绝对定位的 label 就会相互打架。
