纯CSS实现浮动label需用input:focus + label或:not(:placeholder-shown)捕获输入状态，label必须置于input后且父容器设position: relative，placeholder不能为空字符串，Safari需加-webkit-前缀，IE11等旧环境需JS降级处理。
为什么只用 :focus 会出问题
很多初学者写 input:focus + label，结果用户填完内容一失焦，label 就立刻掉回输入框里盖住文字。这不是动画没做好，而是状态判断漏了——聚焦（focus）只是临时态，而「已输入」才是持久态。浏览器不会因为你填了字就自动认为你还在聚焦，所以必须靠 :not(:placeholder-shown) 捕捉真实内容状态。
:not(:placeholder-shown) 的硬性前提
这个伪类不是“有内容就触发”，它依赖两个关键条件：
-
input必须带placeholder属性，且不能是空字符串（placeholder=""不行），哪怕写placeholder=" "都比空好 - 如果用 JS 动态回填数据（比如编辑页加载时赋值），
:not(:placeholder-shown)不会自动激活，得手动触发：input.value = "xxx"; input.dispatchEvent(new Event("input", { bubbles: true })); - Safari 需要加
-webkit-前缀，写成input:not(:-webkit-placeholder-shown)才能兼容
HTML 结构和 CSS 定位的关键细节
结构上，label 必须紧跟在 input 后面，且两者共用一个相对定位的父容器：
<div class="form-group"> <input type="text" id="email" placeholder=" "> <label for="email">邮箱</label> </div>
对应的 CSS 要点：
立即学习“前端免费学习笔记（深入）”；
- 父容器
.form-group必须设position: relative，否则label的position: absolute会往上层找定位上下文，多个输入框的label就容易叠在一起 -
label初始位置建议用top: 0.75rem; transform: translateY(0);，而不是固定top: 10px，这样更适配不同字号 - 动画要分开控制：上浮用
transform，缩放用font-size和opacity，三者都得加transition，但别偷懒写transition: all .2s——它会让没变化的属性也参与重绘，引发轻微抖动
IE 或旧安卓 WebView 怎么办
如果你的项目还要求支持 IE11 或 Android 4.x 的 WebView，:placeholder-shown 直接不可用。这时候退化方案不是“加 polyfill”，而是改用 JS 监听 input 和 blur 事件，手动切换一个 filled 类：
input.addEventListener("input", () => {
label.classList.toggle("filled", input.value.trim() !== "");
});
input.addEventListener("blur", () => {
label.classList.toggle("filled", input.value.trim() !== "");
});
然后用 .filled 替代 :not(:placeholder-shown) 写样式。重点是：这个逻辑必须在页面加载后、表单初始化前执行，否则动态回填的数据不会触发状态更新。
最常被忽略的是父容器定位和 placeholder 值的非空性——这两个点一旦错，整个浮动逻辑就静默失效，连报错都没有，只能靠检查 computed styles 一层层排查。
