浮动标签失效主因是HTML结构或类名错误：input必须在label前、id与for严格匹配、须用.form-floating容器包裹、删placeholder属性、禁用不支持的input类型。
浮动标签失效，90% 是 HTML 结构或类名写错，不是 CSS 没加载、也不是浏览器不支持。
label 和 input 顺序反了
Bootstrap 5 的 .form-floating 依赖 input + label 相邻兄弟关系触发浮动逻辑。如果写成 <label>Name</label><input type="text">，标签永远卡在输入框里不动。
- 必须把
<input>放在<label></label>前面： -
id和for必须严格匹配，大小写、拼写、空格都不能差 - 不要用
<label><input></label>包裹结构——这会让:placeholder-shown失效，浮动直接瘫痪
漏了 .form-floating 容器或 class 写错
没有 <div class="form-floating"> 这层包裹，<code>.form-control 再标准也没用。这个 class 不是可选的装饰，而是浮动样式的作用域锚点。
- 容器必须是
<div class="form-floating">，不能是 <code><div class="floating-label"> 或其他自定义名 <li> <code><input>必须带class="form-control"，漏掉会导致边框、圆角、字体全部塌陷 - 别把
.form-floating和.form-group混用——后者是 Bootstrap 4 遗留物，v5 中无浮动能力 - 删掉所有
placeholder属性：，不是 - 若需占位文字，全交给
<label></label>显示；它浮动后的位置和样式就是最终用户看到的“提示” - JavaScript 动态设置值后，别用
input.value = ""清空就完事——要同步移除value属性，否则:placeholder-shown不会重新计算 - 日期/时间控件建议改用
type="text"+ 第三方日历库（如 flatpickr），确保 DOM 可控 - 文件上传用普通按钮 + 隐藏
<input type="file">，别塞进.form-floating - 多选/单选组别用
.form-check，浮动标签根本不适配这类控件 -
<select></select>能套.form-floating，但它是“伪浮动”：label 不随聚焦动画，只靠定位压在顶部，别期待行为一致
placeholder 属性还在那儿捣乱
Bootstrap 5 浮动逻辑靠 :placeholder-shown 判断“是否为空”，一旦 <input> 有 placeholder 属性（哪怕 placeholder=""），就会干扰状态判断，导致标签该浮不浮、该落不落。
立即学习“前端免费学习笔记（深入）”；
用了不支持的 input 类型
.form-floating 对原生控件兼容性很敏感。type="date"、type="file"、type="checkbox"、type="radio" 在其中基本无法正常浮动，轻则定位错乱，重则 label 点击失焦、整个容器高度塌陷。
真正卡住调试的，往往不是“怎么让它动起来”，而是“为什么它明明结构对了却不动”——这时候要盯死 input 是否真获得了焦点（开发者工具里看 :focus 状态）、label 是否被其他 CSS 的 display: none 或 visibility: hidden 干扰、以及有没有第三方脚本偷偷修改了 DOM 顺序。
