Bootstrap 5 中 float-left 完全无效是因为官方彻底移除了该类，改用语义化、RTL 自适应的 float-start 和 float-end；浮动元素需配合 clearfix 清除父容器塌陷，但现代布局推荐优先使用 flex 或 grid 替代浮动。
Bootstrap 5 里 float-left 完全无效，不是加载问题，是类被删了
Bootstrap 5 彻底移除了 float-left 和 float-right 这两个类，CSS 文件里根本没定义它们。浏览器看到 class="float-left" 就当不认识，自然不执行任何浮动行为。
这不是 CDN 没加载、也不是版本选错（比如误用 v4 的 CSS），而是官方主动删除——因为浮动布局在现代响应式开发中已被 flex 和 grid 取代，继续支持会鼓励过时写法。
如果你是从 Bootstrap 4 升级过来，直接替换 CSS 文件但没改 HTML 类名，页面上所有原本靠 float-left 对齐的元素都会“掉下来”，堆成一列。
float-start 和 float-end 怎么用，和旧写法有啥区别
float-start 在 LTR（如中文、英文）页面中效果等同于 float: left，在 RTL（如阿拉伯语）页面中自动变成 float: right；float-end 则相反。这种设计不是为了炫技，而是让同一套 HTML 能原生适配双向文本环境。
立即学习“前端免费学习笔记（深入）”；
使用方式极简：
– 直接加类：<div class="float-start">左浮动内容</div>
– 不需要额外写 CSS，也不依赖父容器 display 类型
– 支持响应式断点，比如 float-md-end 表示仅在 medium 及以上屏幕右浮动
注意：float-start 不等于 text-start：
– text-start 控制的是行内内容（文字、按钮图标）的对齐
– float-start 是真实触发浮动脱离文档流，会影响周围元素排版
为什么加了 float-start 父容器却塌陷了
浮动元素会脱离文档流，导致其父容器高度无法自动包含它——这就是“塌陷”。Bootstrap 5 仍保留 clearfix 类来解决这个问题，但它必须加在**浮动元素的直接父容器**上，加在别处无效。
常见错误：
– 把 clearfix 加在浮动元素自身：<div class="float-start clearfix"> → 无效
– 父容器用了 display: flex 或 display: grid → clearfix 被忽略（现代布局不需要清浮）
– 父容器设置了 overflow: hidden → 虽然能撑高，但会裁剪 position: absolute 子元素（如下拉菜单）
更现代的解法：
– 把父容器设为 display: flow-root（原生 BFC，无副作用）
– 或直接改用 flex 布局：<div class="d-flex"><div class="me-auto">左</div><div>右</div></div>
什么时候不该用 float-start，该换别的方案
float-start 仅适用于小范围微调，比如图片文本环绕、小图标左对齐等。它不是用来做整页栅格或导航栏布局的工具。
以下场景请立刻停用浮动：
– 实现响应式多列布局：用 .row + .col（flex-based）
– 让按钮靠右：用 ms-auto（flex 内单元素右推）或 justify-content-end（整个 flex 容器右对齐）
– 替代 Bootstrap 4 的 col-md-push-4：改用 order-md-2 控制渲染顺序
– 表单控件对齐：用 text-end 或 form-control 内置间距类，而不是给 input 加浮动
最容易被忽略的一点：浮动标签表单（.form-floating）和 float-start 完全无关——它靠的是 :placeholder-shown 伪类和相邻兄弟选择器，加浮动反而会破坏结构定位。
