Bootstrap 5浮动标签需结构、属性、类型三者全对齐才生效：.form-floating容器内input必须在label前且紧邻，input须有placeholder属性（可为空），仅text/email/password/textarea可靠支持浮动动画。
Bootstrap 5 的浮动标签不是“加个 class 就浮”，而是结构、属性、类型三者全对齐才生效；漏掉任一环，label 就卡在输入框里不动——控制台不报错，纯视觉失效，最难排查。
form-floating 容器和 input+label 顺序必须严格满足
浮动依赖 CSS 相邻兄弟选择器 input + label 和 :placeholder-shown 伪类，所以：
-
<input>必须紧接在<div class="form-floating">开始标签之后，<label>紧跟其后，中间不能有空格、注释、<br>或其他元素 -
label的for属性必须和input的id完全一致（大小写敏感） - 漏掉
form-floating外层容器 → 标签永远不浮动 - 把
label写在input前面 → 标签卡在框内，动都不动
placeholder 属性必须存在，但内容可为空
浏览器靠 :placeholder-shown 判断“是否为空”，从而触发上浮。这个伪类只在 placeholder 属性存在时才生效：
- 必须写
placeholder属性，哪怕值为空：placeholder="" - 完全删掉
placeholder→label不浮动，甚至可能不可见（尤其在 JS 动态设值后） - JS 清空
input.value后，记得同步执行input.placeholder = ""，否则标签浮着但框为空，状态错乱 - 别用
placeholder显示主提示语（如“请输入邮箱”），那是label的事；placeholder只作辅助说明（如“name@domain.com”），放小字<small class="text-muted">更合适
哪些控件类型真正支持浮动？
只有少数类型能可靠触发完整浮动动画：
- ✅ 稳妥支持：
type="text"、type="email"、type="password"、<textarea>（记得加rows="3"） - ⚠️ 表面可用但无真动画：
<select>——label是靠绝对定位“压”进顶部的，不随聚焦/选中变化，建议加<option selected disabled>请选择</option>增强语义 - ❌ 不支持：
type="date"、type="file"、type="checkbox"、type="radio"、type="number"（Safari 中输入时 label 会抖动）；硬套form-floating会导致遮挡、偏移或容器塌陷
::placeholder 才是浮动时的“真标签”，样式必须同步调
浮动后的“标签文字”实际是 input::placeholder 渲染出来的，不是 label 元素本身：
- 改
.form-label字体大小/颜色，只影响静止状态；浮动后变小变淡？那是没同步改.form-control::placeholder - Firefox 需显式加
opacity: 1，否则默认灰度太低 - 深色模式下，
::placeholder默认色值对比度常不足，得配@media (prefers-color-scheme: dark)单独调 - 长中文标签被截断？给
.form-floating > label加white-space: normal，并给控件设min-height: 3.5rem预留空间
最易被忽略的点：浮动效果不是靠 JS 驱动的，它完全依赖 CSS 伪类和 DOM 结构；一旦顺序错、属性缺、类型撞墙，就只剩一个静止的 label 卡在框里——你得检查 HTML 源码，而不是 console.log。
