Bootstrap 5 中 float-left/float-right 已被移除,改用 float-start/float-end 等响应式工具类;需手动清除浮动,推荐优先使用 d-flex 替代。

float 类在 Bootstrap 5 中已被移除,改用 utilities
Bootstrap 5 不再提供 float-left、float-right 这类旧类名。如果你在升级项目或新建项目中写这些类,它们不会生效——浏览器会忽略,CSS 里根本没定义。
替代方案是使用响应式浮动工具类,语法统一为 float-{breakpoint}-{direction},比如:
<div class="float-start">左浮动</div> <div class="float-md-end">中屏及以上右浮动</div> <div class="float-lg-none">大屏取消浮动</div>
-
float-start/float-end是基础类,等价于传统float: left和float: right,且自动适配 RTL(从右向左)布局 - 支持断点前缀:
sm、md、lg、xl、xxl,例如float-sm-start表示“小屏起生效” -
float-none用于清除浮动,常配合响应式组合使用(如先右浮,大屏时取消)
为什么不用 float 了?常见误用场景
很多人仍习惯用 float 做布局(比如左右两栏),但 Bootstrap 官方明确不推荐——因为浮动本身有天然缺陷:父容器高度塌陷、需要额外清除、难以对齐、响应式切换生硬。
真正该用的现代方案是:
- 栅格系统:
col-6+col-6或col-md-4+col-md-8,语义清晰、自动换行、无需清浮 - Flex 工具类:
d-flex、justify-content-between、align-items-center,适合对齐、分布、垂直居中 - 如果只是图文环绕(如图片左浮、文字绕排),
float-start仍可用,但仅限此场景
清除浮动必须手动加吗?
是的,Bootstrap 不自动帮你清浮。用了 float-start 后,后续元素仍会受浮动影响(文字上爬、块级元素重叠)。你得显式处理:
- 最简单:在浮动元素后加一个带
clearfix类的空 div: - 更推荐:给浮动元素的父容器加
overflow-hidden(注意可能裁剪子元素的position: absolute内容) - 或者直接用 Flex 替代——父容器加
d-flex,子项自然不脱离文档流,根本不用清
Bootstrap 4 升级到 5 的浮动类对照表
老项目迁移时容易漏掉这些变化,直接替换会失效:
-
float-left→float-start -
float-right→float-end -
float-none保留,但新增了响应式版本如float-xl-none -
clearfix类仍在,功能不变,但不再绑定:after伪元素清除(改为用display: table实现)
最易被忽略的是 RTL 支持——float-start 在阿拉伯语页面会自动变成右浮,而旧版 float-left 是硬编码方向,这点在国际化项目里要特别留意。











