label与input需通过for/id显式绑定或嵌套隐式绑定才能触发浮动动画；for值必须与id严格一致（大小写、符号、空格均敏感），name无效；绑定错误则:focus-within或:not(:placeholder-shown)等CSS状态失效。
label 怎么和 input 绑定才能触发浮动动画
不绑定或绑定错误，label 就只是静态文字，根本不会随输入框聚焦/填值而上浮。核心就两点：用 for 属性指向 input 的 id，或者把 input 写在 label 标签内部（隐式绑定）。推荐显式写 for，结构更清晰、可维护性更强。
常见错误是只写了 name 没写 id，或者 for 值拼错（比如多空格、大小写不一致）。浏览器不会报错，但 CSS 里的 :focus-within 或 input:focus + label 选择器就完全失效。
-
<label for="username">用户名</label><input type="text" id="username">✅ -
<label for="username">用户名</label><input type="text" name="username">❌ 缺id -
<label for="UserName">用户名</label><input type="text" id="username">❌ 大小写不匹配
CSS 浮动提示依赖哪些关键选择器和状态
浮动效果本质是 label 从“占位文本”变成“顶部标签”，需要监听两个状态：输入框有值（input:not(:placeholder-shown) 或 input:valid），以及输入框获得焦点（input:focus）。现代写法优先用 :focus-within 在父容器上监听，兼容性更好且逻辑更稳。
别直接对 label 写 transition: all .2s —— 它会同时过渡所有属性，导致位置、颜色、缩放一起动，显得毛刺。只过渡 transform 和 top 等布局属性更干净。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<div class="input-group"><input><label></div>，然后用.input-group:focus-within label - IE 不支持
:focus-within，需降级为input:focus + label（label 必须紧跟 input） - 判断“已输入”用
input:not(:placeholder-shown)更可靠，:valid会受required干扰
placeholder 和 label 共存时怎么避免视觉冲突
label 上浮后，如果 input 还显示 placeholder，就会叠在一起。必须在 label 上浮时主动隐藏 placeholder。不能靠 JS 控制显示隐藏，要用纯 CSS：
input:not(:placeholder-shown) + label,
input:focus + label {
transform: translateY(-1.5rem) scale(0.85);
}
input:not(:placeholder-shown)::-webkit-input-placeholder,
input:not(:placeholder-shown)::-moz-placeholder {
color: transparent;
}
注意：Firefox 的 ::-moz-placeholder 需单独写，且 transparent 比 none 更稳妥；color: transparent 不影响可访问性，屏幕阅读器仍能读取 placeholder 文本。
- 别用
display: none隐藏 placeholder —— 它会让占位文本彻底消失，影响表单语义 - 移动端 Safari 对
:placeholder-shown支持较晚（iOS 11.3+），旧版本需 JS 补丁 - 如果 input 有默认值（如回填场景），
:placeholder-shown为 false，label 会自动上浮，这是预期行为
为什么用 transform 而不是 top 实现上浮动画
用 top 会触发 layout（重排），尤其在滚动或动画频繁时掉帧明显；transform: translateY() 只走合成层，GPU 加速，顺滑得多。而且 transform 不影响文档流，不会挤动下方元素，label 上浮时周围布局零干扰。
另一个关键是缩放（scale(0.85)）—— 单纯上移会让 label 看起来太“大”，缩放后视觉更协调，也自然形成“标签变小、退居二线”的暗示。但缩放值不宜低于 0.75，否则小字体在高分屏上难辨认。
- 动画时间控制在
.2s–.25s最合适，太快没感知，太慢显迟滞 - 务必加
will-change: transform到 label 上（仅动画元素），提前告知浏览器优化路径 - 别给 label 设
position: absolute—— 它会让 label 脱离正常流，破坏可访问性顺序和焦点管理
focus-within 的降级方案。很多 demo 在 Chrome 里很丝滑，一换 Safari 或低版本 Android 就错位或不动，问题往往出在这两处。 
