Bootstrap 5 启用浮动标签需用 .form-floating 包裹，input 必须在 label 前，id/for 必须匹配，且需移除 placeholder；不支持 date、file、checkbox 等类型。
Bootstrap 5 怎么启用浮动标签（floating labels）
bootstrap 5 原生支持浮动标签，但**默认不开启**——它不是自动生效的，必须手动添加 .form-floating 包裹容器，并把 <input> 和 <label> 顺序放对。很多人写了 form-control 却没看到标签上浮，就是因为漏了这层容器或结构错了。
-
<div class="form-floating">是必需的包裹层，不能省 -
<input>必须在<label>前面，顺序反了标签不会浮动 -
id和for属性必须匹配，否则点击 label 无法聚焦 input - 不支持
<textarea>的rows动态高度自适应，固定rows="3"更稳
为什么 placeholder 消失后 label 不上浮？
常见现象：输入文字后 label 没上浮，或者一聚焦就闪一下又掉下来。根本原因是 placeholder 和 label 冲突了 —— Bootstrap 5 的浮动逻辑依赖 placeholder 判断“是否为空”，一旦 input 有 placeholder，哪怕值为空，也会干扰浮动状态判断。
- 去掉
placeholder属性，只留<label>，这是最稳妥的做法 - 如果非要用 placeholder（比如辅助说明），得用 JS 监听
input事件手动 toggle.form-label的位置，但没必要 - 使用
required或value初始化时为空字符串value=""，否则预填充值会让 label 一开始就在上面，显得奇怪
和 Bootstrap 4 的浮动标签有什么区别？
Bootstrap 4 没有原生浮动标签，靠第三方插件或手写 CSS 实现；Bootstrap 5 把它收进核心组件，但行为更严格、更依赖结构语义。最大的实际差异是：BS5 要求 label 必须有 for，且 input 必须有对应 id，否则 label 不会响应 focus 状态变化。
- BS4 常见 hack：
position: relative+transform手动上移 label；BS5 全靠 CSS 变量和 :placeholder-shown 伪类驱动 - BS5 不再支持
.floating-label这类旧类名，只认.form-floating - 无障碍方面，BS5 的实现更符合 WCAG，label 显式绑定后屏幕阅读器能正确读出
input 类型不兼容导致浮动失效的坑
不是所有 <input> 类型都表现一致。比如 type="date"、type="file"、type="checkbox" 在 .form-floating 里会出问题：label 上浮错位、点击无反应、甚至整个容器塌陷。
-
type="date"/"time"：浏览器原生控件样式覆盖了浮动逻辑，label 会被遮挡或定位偏移，建议改用普通text+ JS 日历库 -
type="file"：不支持 placeholder，且:placeholder-shown伪类不触发，label 始终卡在下方，别硬套.form-floating -
type="checkbox"/"radio"：语义上就不该用浮动标签，label 本就是交互主体，加.form-floating只会让布局错乱
浮动标签看着简单，但真正在表单里跑通，关键不在“怎么写”，而在“哪些地方不能写”。结构顺序、属性绑定、input 类型限制，三者只要一个没对齐，label 就卡在半空不动——这种问题调试起来特别耗时间，因为控制台不报错，纯视觉失效。
