Bootstrap 5浮动标签需同时满足结构、属性、类型三者对齐：div.form-floating包裹，input在label前且id/for匹配，必须移除placeholder；date/file/checkbox等类型不支持，长标签需white-space:normal并同步调整::placeholder样式。
Bootstrap 5 的浮动标签（form-floating）不是“写了就浮”，而是结构、属性、类型三者全对齐才能生效；漏掉任一环节，标签就卡在输入框里不动——控制台不报错，纯视觉失效，最难排查。
form-floating 必须用 div.form-floating 包裹，且 input 在 label 前面
这是最常翻车的第一步。很多人沿用 Bootstrap 4 习惯把 label 写在 input 前面，结果标签死活不上浮。
-
input必须紧接在div.form-floating开始标签之后，label紧跟其后（顺序不能换） -
input必须有id，label必须有匹配的for属性，否则点击 label 无法聚焦，浮动状态也不触发 - 不要手动加
margin-bottom调间距——用mb-3这类工具类更稳
placeholder 必须删掉，否则浮动逻辑被干扰
Bootstrap 5 的浮动依赖 :placeholder-shown 伪类判断“是否为空”，但前提是 input 没有 placeholder 属性。一旦存在，哪怕 placeholder=""，也会导致：
- 输入文字后 label 不上浮
- 聚焦时 label 闪一下又掉回框内
- 预填 value 时 label 一开始就在上方，显得突兀
正确做法是：彻底移除 placeholder 属性，只靠 label 提供提示文本。如果真需要辅助说明（比如“邮箱格式”），改用 small class="text-muted" 放在控件下方。
哪些 input 类型不支持？date、file、checkbox 会出问题
不是所有表单控件都能和 form-floating 安全共存：
-
type="date"和type="time"：浏览器原生控件样式会覆盖浮动定位，label 常被遮挡或偏移 -
type="file"：按钮区域与 label 层叠错乱，点击无响应 -
type="checkbox"/type="radio"：整个容器塌陷，边框消失 -
select：能用，但“浮动”是静态的——label 固定在左上角，不会随聚焦/输入动画，因为select没有placeholder属性，无法触发状态监听
遇到这些类型，要么换为 type="text" + JS 日历/文件选择库，要么放弃浮动，改用传统 form-label + form-control 组合。
长标签换行和深色模式下 ::placeholder 显示异常
默认 .form-floating > label 是 white-space: nowrap，窄屏或中文长标签直接截断。同时，浮动后的“标签文字”其实是靠 .form-control::placeholder 渲染的，不是 .form-label。
- 修复换行：给
.form-floating > label加white-space: normal; line-height: 1.4;，并给控件设min-height: 3.5rem预留空间 - 修复深色模式：Firefox 需显式写
.form-control::placeholder { opacity: 1; }，否则文字发灰不可读 - 别只调
.form-label字体大小——必须同步改.form-control::placeholder的font-size和color，否则浮动后突然变小变淡
真正难搞的不是怎么让它浮起来，而是它浮起来之后，在不同屏幕、不同输入状态、不同主题下还能保持一致——这需要你盯着 label 和 placeholder 的样式耦合关系，而不是只改一个地方。
