bootstrap 5浮动标签需结构、属性、类型三者全对齐才生效；必须用form-floating包裹，input在label前且紧邻，label的for与input的id严格一致，placeholder不可省略，仅text/email/password/textarea可靠支持。
Bootstrap 5 的 Floating Labels 不是“写了就能用”，而是结构、属性、类型三者全对齐才生效；它没有明显优点可吹，但缺点很实在：兼容性窄、语义强绑定、视觉易断裂。
form-floating 容器和标签顺序必须严格满足
浮动标签失效，90% 是因为没套 form-floating 或顺序写反了。Bootstrap 5 依赖 CSS 相邻兄弟选择器（input + label）和 :placeholder-shown 判断状态，所以：
-
<input>必须在<label></label>前面，且两者紧挨着，中间不能插其他元素 -
label的for属性必须和input的id完全一致，大小写都不能错 - 必须用
<div class="form-floating"> 包裹整组，漏掉这个 class 就等于没开开关 <li>别信“placeholder 可有可无”——它不是显示用的，而是浏览器判断“是否为空”的依据；哪怕写 <code>placeholder=""也比不写强 -
type="date"、type="time"、type="file"：浏览器原生 UI 强制接管，label 要么被遮挡，要么上浮后偏移出界 -
type="checkbox"、type="radio"：没有 placeholder，也不适用:placeholder-shown，浮动逻辑压根不触发 -
type="number"：部分浏览器（如 Safari）在输入时会抖动，label 位置跳变 - 真正稳妥的只有：
type="text"、type="email"、type="password"、<textarea></textarea> - 改字体大小、颜色、透明度，必须同步作用于
.form-control::placeholder，否则视觉断裂 - Firefox 需显式加
opacity: 1，否则默认灰度太低，浮起来像快看不见 - 深色模式下，
::placeholder默认色值可能对比度不足，得配@media (prefers-color-scheme: dark)单独调 - JavaScript 动态清空
input.value后，记得手动恢复input.placeholder = ""，否则 label 会卡在上方不动 -
<select></select>的 label 是靠绝对定位“压”进顶部的，不响应 focus、不随输入变化，只是静态贴图 - 推荐写一个
<option selected disabled></option>作为默认占位，比依赖 label 更可靠 -
<textarea></textarea>行为正常，但若设了固定height或rows="5"，要检查 label 是否被截断——尤其在移动端 - 验证失败时（
.is-invalid），label 位置不变，但错误图标和红边框可能和 label 重叠，需手动加margin-bottom或调整padding
哪些 input 类型根本不能用 floating labels
不是所有表单控件都支持。Floating labels 在部分原生控件上会直接错位或失效，因为它们的渲染逻辑覆盖了 Bootstrap 的定位规则：
::placeholder 才是浮动时的“真标签”
很多人调大 .form-label 字体后发现 label 浮起来变小了——那是因为浮动状态实际渲染的是 input::placeholder，不是 label 元素本身：
select 和 textarea 的行为差异很关键
<select></select> 虽然能套 form-floating，但它没有真正的浮动动画：
真正难调试的从来不是“怎么写出来”，而是“为什么看起来像写了却不动”。结构错一位、id 对不上、placeholder 少一个引号、用了不支持的 type——这些都不会报错，只会在页面上静默失效。盯住这四点：容器、顺序、属性、类型，比查文档更快定位问题。
