bootstrap 5浮动标签失效主因是结构、属性、类型三者未对齐：必须用包裹，input在label前且紧邻，id/for严格匹配，placeholder属性不可省略但内容可为空，仅text/email/password/textarea可靠支持。
form-floating容器没套对，标签直接卡死在框里
浮动标签根本没动，不是样式问题，而是 form-floating 这层容器压根没包住 input 和 label。Bootstrap 5 的浮动逻辑只在 <div class="form-floating"> 作用域内生效，漏掉或写成 <code><div class="floating-label"> 都等于没开开关。
<p>常见错误：</p>
<ul><li><code><div class="form-group"> 混用 —— 这是 Bootstrap 4 遗留类，v5 中无浮动能力
<li>input 和 label 被其他元素（比如 <code><span></span> 或注释）隔开，破坏了 input + label 相邻兄弟关系
<label>Name</label><input id="name"> —— 浮动 CSS 选择器失效placeholder 属性还在，:placeholder-shown 被骗了
浮动依赖浏览器的 :placeholder-shown 伪类判断是否为空，但这个伪类只在 input 有 placeholder 属性时才可能触发。可矛盾点在于：如果 placeholder 值为空（placeholder=""），它会干扰状态切换；如果完全删掉，某些浏览器又不触发上浮。
正确做法是保留 placeholder，但内容为空，并配合 JS 动态管理：
- 初始化时写
<input placeholder="">，别写placeholder="姓名" - 用 JS 清空值后，必须同步执行
input.placeholder = ""，否则:placeholder-shown不重算 - 预填 value 的场景，要手动移除 placeholder 属性：
input.removeAttribute('placeholder')，否则标签一开始就在上方“悬空”
input 类型不支持，位置偏移或 label 被遮挡
不是所有 <input> 都能塞进 form-floating。原生控件的渲染层会覆盖 Bootstrap 的定位规则，导致 label 错位、点击失焦甚至整个容器高度塌陷。
明确不推荐的类型：
-
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>。
::placeholder 样式没同步，浮起来像褪色了
浮动后的“标签文字”其实不是 <label></label> 元素本身，而是靠 input::placeholder 渲染出来的。很多人只调 .form-label 字体大小和颜色，结果静止时正常，一上浮就变小、变淡、甚至 Firefox 下几乎看不见。
必须同步调整：
-
.form-control::placeholder要设font-size、color和opacity: 1（Firefox 必须显式声明） - 深色模式下需加
@media (prefers-color-scheme: dark)单独调色，否则对比度不足 - 长中文标签截断？给
.form-floating label加white-space: normal，并确保控件有足够高度（如min-height: 3.5rem）
