label必须紧接input后且input需含placeholder属性，form-floating容器和form-control类不可省略，select和file不支持真正浮动，长标签需手动设置white-space和min-height。
label 必须紧接在 input 后面，且 input 必须带 placeholder
Bootstrap 5 的浮动逻辑依赖 CSS 相邻兄弟选择器（+）和 :placeholder-shown 伪类，label 必须紧跟在 input 或 textarea 之后才能被样式捕获。顺序错了或中间有空格、注释、其他标签，浮动就失效。
常见错误现象：
-
label写在input前 → 标签卡在输入框内部不动 -
input没写placeholder属性 → 标签不浮动，甚至完全不可见（哪怕 JS 动态设值也无用） - JS 清空
value后没同步重置placeholder→ 标签浮着但输入框为空，状态错乱
正确写法示例：
<div class="form-floating"> <input type="text" class="form-control" id="name" placeholder="请输入姓名"> <label for="name">姓名</label> </div>
注意：placeholder 内容可以为空（placeholder=""），但属性本身不能省。
form-floating 容器必须包裹整个结构，且控件需含 form-control 类
漏掉 .form-floating 外层容器，或漏掉 .form-control（或 .form-select），会导致样式塌陷：边框消失、字体变小、聚焦无反馈、浮动动画不触发。
使用场景中容易忽略的点：
-
select要用.form-select，不是.form-control -
textarea必须加rows（如rows="3"），否则高度不可控，浮动标签可能被截断 - 不要给
form-floating容器手动加margin或padding—— 用 Bootstrap 工具类如mb-3
错误示范：<input class="form-control"><label>邮箱</label>（缺 form-floating 包裹）→ 标签永远不浮动。
select 和 file 类型不支持真正浮动动画
select 元素没有原生 placeholder，Bootstrap 只能靠定位把 label “压”进顶部，不会随聚焦或选中变化而上浮；type="file" 则因 :placeholder-shown 不触发，label 始终卡在下方，硬套 form-floating 会出视觉 bug。
可行做法：
- 对
select，保留form-floating结构，但加一个disabled selected的默认项（如<option selected disabled>请选择</option>）增强语义 - 对
file输入，直接放弃form-floating，改用传统label+input组合，或自定义按钮触发 - 别指望
checkbox/radio能浮动——它们压根不在form-floating支持列表里
长标签换行与高度适配要改 ::placeholder 和控件 min-height
默认情况下，过长的 label 文字会被截断或撑破容器。Bootstrap 不自动处理多行，得手动加 CSS。
关键调整点：
- 给
.form-floating > label加white-space: normal和line-height: 1.4，启用换行 - 给
.form-floating .form-control设min-height: 3.5rem（≈ 两行文字 + 输入区），同时保持height: auto - 别只调
.form-label字体大小——浮动时显示的是::placeholder的内容，所以input::placeholder的font-size和color也要同步改
最易被忽略的细节：多行 label 在聚焦后若控件高度不够，会把文字“顶出去”，看起来像标签消失了。这时候光调 label 没用，必须确保控件本身有足够垂直空间。
