Bootstrap 5浮动标签依赖:placeholder-shown伪类与input+label相邻选择器，label必须在input后且input必须有placeholder属性（含placeholder=""），否则浮动失效。
Bootstrap 5 的浮动标签不是靠 JavaScript 驱动的，而是基于 :placeholder-shown 伪类 + 相邻兄弟选择器（+）实现的；你手动写 CSS 也能复现，但必须严格匹配结构和属性，否则标签根本不会上浮。
为什么 label 必须在 input 后面、且 input 必须带 placeholder
Bootstrap 5 的浮动逻辑依赖两个 CSS 基础能力：:placeholder-shown 判断是否为空，input + label 定位并样式化标签。如果 label 在 input 前面，+ 就选不到它；如果 input 没有 placeholder 属性（哪怕值为空字符串），:placeholder-shown 就不会触发，整个浮动链就断了。
-
label放在input前面 →input + label选择器失效，标签卡在框内不动 -
input缺placeholder→ 浏览器无法判断“是否为空”，:placeholder-shown不匹配，浮动不启动 -
placeholder=""是合法且推荐的写法，比placeholder=" "更干净，也避免空格被误读为真实占位文本
自定义浮动效果时，::placeholder 样式必须同步改
浮动后的“标签”视觉上其实是 input::placeholder 被 CSS 伪装出来的——它被缩放、上移、变色，而原始 label 只是作为定位锚点存在。所以只调 .form-label 的字体大小或颜色，对浮动状态完全无效。
- 要改浮动标签大小，得设
.form-control::placeholder { font-size: 0.875rem; } - 要改颜色，必须同时覆盖
color和opacity: 1（Firefox 默认 opacity 是 0.5） - 深色模式下，
::placeholder灰度常不够，需加@media (prefers-color-scheme: dark)单独处理 - 别用
!important覆盖 Bootstrap 默认，优先用更具体的选择器，比如.form-floating .form-control::placeholder
select 和 textarea 的浮动行为差异
select 元素没有原生 placeholder 属性，所以 Bootstrap 只能靠定位把 label 压进控件顶部，它不会随聚焦或输入动画——所谓“浮动”只是静态位置模拟。而 textarea 完全支持 :placeholder-shown，行为和 input 一致，但要注意：如果设了固定 height 或 rows，标签可能被截断，建议用 min-height + resize: vertical 更稳妥。
-
select的 label 始终固定在左上角，不响应:focus或:not(:placeholder-shown) -
textarea的浮动动画正常，但若父容器高度受限，label的top值可能超出可视区 - 所有浮动控件都必须带
form-control类，漏掉会导致边框塌陷、字体错乱
表单验证失败时，浮动标签遮挡 .invalid-feedback
Bootstrap 的 .is-invalid 样式会在 input 底部加红色边框和图标，但浮动后的 label 位置是绝对固定的（top: 0），不会自动避让错误提示。用户填错后，红色提示文字容易被 label 盖住或挤到右侧。
- 最直接的解法：给
.invalid-feedback加margin-top: 0.25rem，留出 label 下方空间 - 如果用了自定义
font-size，记得同步调整.invalid-feedback的margin-top值 - 别试图用
z-index把label压下去——它本就不该挡住反馈信息，布局逻辑本身就有缺陷
真正难搞的不是怎么让它浮起来，而是怎么让它在各种边界场景下（动态清空值、深色模式、验证失败、多行文本）保持位置正确、视觉连贯。这些细节不写 JS 就很难兜底，所以 Bootstrap 选择用 placeholder + :placeholder-shown 这套纯 CSS 方案，前提是开发者得把 HTML 结构和属性写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
