bootstrap 5 原生不支持浮动标签，必须使用 form-floating 容器并严格遵循 input 在前、label 在后且 for 属性匹配的结构，否则标签无法上浮或无障碍失效。
Bootstrap 5 原生不支持浮动标签（floating label）
Bootstrap 5 默认的 form-control 不会自动把 label 浮到输入框上方——这是很多人直接升级后踩的第一个坑。它只在 input 有 placeholder 且聚焦时，靠 CSS 模拟出类似效果，但不符合语义、不兼容屏幕阅读器，也不响应 value 变化。
必须手动添加 form-floating 包裹容器
浮动标签功能被抽离为独立组件，需用 form-floating 作为父容器，并严格遵守结构：先写 input，再写 label，且 label 必须带 for 属性指向 input 的 id。
常见错误现象：
-
label写在input前面 → 标签永远沉底，不浮动 -
input缺少id或label的for值不匹配 → 浮动失效，且无障碍访问失败 - 用
placeholder替代label→ 视觉上像浮动，但实际是 placeholder 动画，表单提交时无 label 关联
正确写法示例：
<div class="form-floating"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"><label for="floatingInput">Email address</label> </div>
form-floating 对 input 类型和状态敏感
不是所有 input 类型都表现一致。比如 type="checkbox" 或 type="radio" 不能用 form-floating；type="file" 会错位；textarea 支持但需手动设 rows，否则高度塌陷。
关键细节：
- 聚焦时标签上浮依赖
:focus-within，所以父容器必须是form-floating，不能嵌套在其他自定义 wrapper 里 -
value非空时标签也应保持上浮，但 Bootstrap 5 不监听 value 变化 —— 如果 JS 动态填值，得手动加form-control:valid或触发input事件 - 使用
disabled或readonly时，标签位置正常，但颜色变灰，符合预期 - 配合
is-invalid显示错误时，需同时给input加is-invalid和aria-describedby，否则红色边框出现但提示文字不联动
与 Bootstrap 4 的差异导致样式断裂
如果你从 v4 迁移，会发现原来靠 .form-group + .form-label + .form-control 实现的“伪浮动”完全失效。v5 彻底移除了对 placeholder 驱动浮动的 CSS 支持，form-floating 是唯一正路。
容易被忽略的点：
-
form-floating内部用了position: relative和transform，如果父级有overflow: hidden，标签上浮时可能被裁切 - 自定义字体大小或行高会影响
label上浮后的垂直居中，需重置.form-floating > label的padding-top和transform - SSR 场景下，服务端渲染时
input.value为空，但客户端 JS 立即填值 → 标签会闪一下再上浮，需用class="form-control form-control-sm"等稳定类提前占位
这事没多复杂，但得按它的结构来，少一个 id、错一行顺序，浮动就掉地上了。
