浮动标签核心依赖:not(:placeholder-shown)判断已输入状态，而非仅:focus；placeholder属性必须非空，否则伪类不触发；动态填充需手动派发input事件激活CSS状态。
浮动标签（floating label）不是靠 float 实现的，也不是用 position: absolute 硬拖上去就完事——它必须同时响应「聚焦」和「已输入」两种状态，否则用户填完内容一失焦，标签就掉回框里盖住文字。
为什么 :placeholder-shown 是核心判断依据
现代浮动标签真正可靠的触发条件，是浏览器原生支持的 :placeholder-shown 伪类。它只在 input/textarea 正显示 placeholder 文本时匹配；一旦用户输入哪怕一个字符，或手动调用 input.value = "xxx"，该伪类就失效，:not(:placeholder-shown) 就成立。
常见错误是只监听 :focus：用户填完内容点别处，label 立刻回落，和输入值重叠。
-
placeholder属性必须存在且非空（哪怕只写placeholder=" "），否则:placeholder-shown永远不触发 - IE 不支持该伪类，如需兼容，得 fallback 到 JS 监听
input和blur事件 -
textarea同样适用，但select元素不触发:placeholder-shown（因为没有 placeholder 行为）
form-floating 类在 Bootstrap 5 中的实际限制
Bootstrap 5 的 form-floating 看似开箱即用，但有几个硬性约束常被忽略：
立即学习“前端免费学习笔记（深入）”；
-
<label>必须紧跟在<input>或<select>后面，顺序错位会导致样式错乱 -
<input>必须带placeholder，且值不能为""（空字符串）——否则 label 不会初始下沉，而是悬在顶部不动 -
select的 placeholder 选项必须设disabled selected，例如<option disabled selected>请选择</option>，否则:not(:placeholder-shown)逻辑失效 - 自定义高度、圆角或边框颜色时，需覆盖
.form-control:focus和.form-label的 transform 偏移量，否则上浮位置偏移
纯 CSS 实现时最容易漏掉的三个 transition 细节
浮动动画是否自然，取决于这三处 transition 是否统一设置：
- label 的
transform和font-size必须加transition，否则上浮突兀 - input 边框颜色变化（如
border-color: #007bff）也要加transition，否则聚焦反馈断裂 - label 的
opacity建议从0.6→1渐变，避免纯黑字体在浅色背景上“闪一下” - 不要只写
transition: all .2s——它会让所有属性都动，包括没用的width或height，造成渲染抖动
最易被忽略的是：当表单通过 JS 动态填充（比如编辑页回填数据）时，:not(:placeholder-shown) 不会自动生效，因为 placeholder 仍存在且未被清除。此时必须手动设置 input.value 并触发 input.dispatchEvent(new Event('input', { bubbles: true }))，才能激活 CSS 状态。
