label必须置于input后且input需含placeholder，否则浮动失效；select无真正浮动动画，textarea正常；form-control类不可少；::placeholder样式需同步调整以避免视觉断裂。
label 必须放在 input 后面，且 input 必须带 placeholder
这是最常翻车的第一步：很多人照着 Bootstrap 4 的习惯把 label 写在 input 前面，结果标签死活不浮动——Bootstrap 5 的浮动逻辑依赖 CSS 的 +（相邻兄弟选择器）和 :placeholder-shown 伪类，label 必须紧接在 input 或 textarea 之后才能被样式捕获。
同时，placeholder 属性**必须存在**，哪怕内容为空（placeholder=""），否则浮动动画不会触发。浏览器靠它判断“输入框是否为空”，从而决定标签是否该上浮。
-
label在input之前 → 标签卡在框内不动 -
input缺少placeholder→ 标签不浮动，甚至可能完全不可见 - 用 JavaScript 动态清空值后没重置 placeholder → 浮动状态错乱（比如值为空但标签还浮着）
select 和 textarea 也能用，但行为有差异
select 元素支持 form-floating，但它的“浮动”是假的：标签不会随聚焦或输入而动画，而是始终固定在左上角，仅靠容器定位模拟效果；textarea 则完全正常，和 input 行为一致。
这是因为 select 没有原生 placeholder 属性，Bootstrap 只能靠 CSS 把 label 压进控件区域顶部，无法监听输入状态变化。所以别指望下拉框有真正的浮动动画。
- 对
select，建议加disabled的默认option（如<option selected disabled>请选择</option>）来增强语义 -
textarea的placeholder会随高度自适应，但若设了rows或固定height，要留意标签是否被截断 - 所有浮动标签都依赖
form-control类，漏掉会导致样式塌陷（比如边框消失、字体变小）
自定义颜色/大小时，别只改 label，还要动 placeholder
浮动后的标签其实是靠 input::placeholder 的文字撑起来的，所以改 .form-label 的 font-size 或 color 只影响静止状态；真正浮动时显示的“标签文字”，其实是 ::placeholder 的内容——它被 CSS 伪装成标签。
这意味着：如果你调大了 .form-label 字体，但没同步改 .form-control::placeholder，浮动后标签会突然变小、变淡，视觉断裂。
- 统一调整：给
.form-control::placeholder设font-size、color和opacity: 1（Firefox 需显式声明） - 避免用
!important覆盖 Bootstrap 默认，优先用更具体的选择器，比如.form-floating .form-control::placeholder - 深色模式下，
::placeholder默认灰度可能不够，需配合@media (prefers-color-scheme: dark)单独处理
表单验证失败时，浮动标签容易遮挡错误提示
Bootstrap 5 的 .is-invalid 样式会让 input 底部出现红色边框和图标，但浮动后的 label 位置固定在顶部，不会自动上移腾出空间——结果就是错误图标被标签挡住，或者红框被截断。
这不是 bug，是设计使然：浮动标签容器不参与验证反馈的布局重排。解决办法只能手动干预。
- 给
.form-floating容器加margin-bottom: 1.5rem（留出错误提示空间） - 用
.invalid-feedback时，确保它紧跟在form-floating容器之后，而不是塞进里面 - 如果用了自定义验证（比如 JS 手动加
is-invalid），记得同步检查label是否还在正确位置，尤其在动态切换类型（text → email）时
placeholder-shown 是否生效。
