bootstrap 4 中 float-left 等类默认不生效，因 sass 变量 $enable-float 默认为 false，导致编译时跳过所有浮动工具类；需手动设为 true 或定制下载启用，否则 css 中无对应规则。
Bootstrap 4 的 float-left、float-right、clearfix 等浮动类不是“失效”，而是被设计为**有条件启用**：它们默认不加载，必须显式开启。
为什么 float 类在 Bootstrap 4 中查不到 CSS 规则
Bootstrap 4 默认禁用了整个浮动工具集（包括 float-left、float-none、clearfix），只保留 flex 相关类作为布局主力。这是编译时的配置项决定的，不是 bug 或遗漏。
- 源码中
$enable-floatSass 变量默认设为false，导致所有浮动相关 CSS 规则被跳过编译 - 即使你在 HTML 里写了
class="float-left"，DevTools 里也搜不到对应样式——它根本没进最终 CSS 文件 - CDN 版本（如 Bootstrap 4.6.2）已按此配置构建，所以无论你怎么写 class，都无效
如何让 float-left / float-right 在 Bootstrap 4 中生效
只有两种可靠方式，且都需你控制构建流程：
- 如果你用 Sass 编译：在引入 Bootstrap 前，提前定义
$enable-float: true;，再@import "bootstrap"; - 如果你用定制下载（如 https://getbootstrap.com/docs/4.6/customize/）：勾选 “Float” 工具类选项，重新生成 CSS
- 不推荐硬塞 CSS：手动补
.float-left { float: left !important; }会破坏 flex 容器内子项行为，尤其在.row或.d-flex里引发塌陷或错位
float-left 失效时，该用什么替代
绝大多数原用 float-left 的场景，Bootstrap 4 推荐直接切到 flex 工具类，更稳定、语义更清：
- 文字环绕图片？用
d-flex align-items-start+mr-3（右外边距）替代float-left - 左右分栏（非栅格）？用
d-flex+justify-content-between或flex-row - 清除浮动？
d-flex容器天然不需要clearfix；若必须包裹块级流内容，改用overflow: hidden或col类 - 响应式浮动切换（如 sm-only 左浮）？改用
d-sm-flex+justify-content-sm-start
容易忽略的兼容陷阱
即使你成功启用了 float-left，它和 Bootstrap 4 的 flex 基础设施仍可能冲突：
-
.row是display: flex，内部子元素设float-left会脱离文档流，导致高度塌陷、align-items-center失效 -
.col类本身是 flex-item，浮动后不再参与 flex 分配，宽度计算回归 content-width，破坏栅格比例 - IE10+ 支持 flex，但 IE9 及以下完全不支持；而
float-left在 IE9 是可用的——如果你真要兼容 IE9，别用 Bootstrap 4，回退到 v3
真正需要浮动的边缘场景极少；多数所谓“失效”，其实是误把 flex 容器当普通块级容器用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
