bootstrap 4+ 已全面迁移到 flexbox，float 仅用于工具类和兼容性兜底；直接写 float 会与 flex 栅格冲突，导致列宽失效、间距错乱和响应式断裂。
Bootstrap 3 及更早版本大量依赖 float 实现栅格系统，但 Bootstrap 4+ 已全面迁移到 Flexbox，float 仅保留在极少数工具类和兼容性兜底场景中。直接用 float 写布局，在现代 Bootstrap 项目里不仅多余，还容易和内置的 flex 栅格冲突。
Bootstrap 3 的栅格系统完全靠 float 实现
Bootstrap 3 的 .row 和 .col-* 类底层全部基于 float: left。每个列元素都设了 float: left 和固定百分比宽度（如 .col-md-4 是 33.333%），靠父容器 .row 触发 BFC（常用 overflow: hidden）来防止塌陷。
-
.row自身不浮动，但通过margin-left: -15px抵消子列的padding-left - 所有
.col-*都带float: left，且必须成对出现在.row内，否则会换行错位 - 响应式断点（如
md、lg）只是在不同媒体查询里切换 float 宽度，没做任何“智能重排”
Bootstrap 4/5 中 float 仅用于工具类和兼容 fallback
Bootstrap 4 起用 display: flex 重写了 .row 和 .col-*，float 退为辅助角色。现在只有这些地方还用到它：
-
.float-start/.float-end（替代旧的.pull-left/.pull-right）——仅用于图文环绕或小范围定位，比如侧边引用块、头像右对齐 -
.clearfix类依然存在，内部是::after { content: ""; display: table; clear: both; }，专为需要手动清除 float 的遗留代码留着 - 某些组件（如
dropdown-menu）在 IE11 兜底逻辑里可能隐式触发 float 行为，但开发者无需主动写
直接写 float 会和 Bootstrap flex 栅格打架
如果你在 Bootstrap 4+ 项目里给 .col 手动加 float: left，会出现三类典型问题：
- 列宽失效：flex 容器会忽略 float，但 float 又破坏 flex 子项的正常排列，导致列堆叠或溢出
- 间距错乱：
gap或g-*类失效，因为 float 元素已脱离文档流，不再受 flex gap 控制 - 响应式断裂：媒体查询改的是 flex 属性（
flex: 0 0 50%），而 float 宽度没同步更新，小屏下仍强行并排
图文环绕这类需求，优先用 Bootstrap 工具类而非手写 float
想让图片左浮、文字环绕？别写 img { float: left; margin-right: 1rem; }，用现成的：
-
<img src="..." class="float-start me-3">——me-3提供右边距，语义清晰且响应式友好 - 配合
.text-wrap或.overflow-hidden控制文字换行行为 - 若需清除环绕影响，后面紧跟
<div class="clearfix"></div>，而不是自己写clear: both
真正要小心的不是“怎么用 float”，而是“为什么还在用”。现代 Bootstrap 里，float 是个有明确边界的老兵——只守工具类岗，不参与主战场。一旦发现 layout 出现诡异错位，第一反应不该是调 float，而是检查是否混用了 flex 和 float 布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
