Bootstrap 浮动与清除浮动
Bootstrap 中控制元素浮动和清除浮动的 class 用法
问题
Bootstrap 中有哪些控制元素浮动及清除浮动的 class？
解答
浮动类
Bootstrap 4：
<!-- 左浮动 -->
<div class="lvj4q">左浮动</div>
<!-- 右浮动 -->
<div class="w3tkn">右浮动</div>
<!-- 不浮动 -->
<div class="hlze4">不浮动</div>Bootstrap 5（改用逻辑属性命名）：
<!-- 左浮动 -->
<div class="dfr09">左浮动</div>
<!-- 右浮动 -->
<div class="ixvtl">右浮动</div>
<!-- 不浮动 -->
<div class="hlze4">不浮动</div>响应式浮动
可以根据断点控制浮动行为：
<!-- 小屏不浮动，中屏及以上左浮动 -->
<div class="hlze4 float-md-start">响应式浮动</div>
<!-- 支持的断点：sm, md, lg, xl, xxl -->
<div class="float-sm-end">小屏及以上右浮动</div>清除浮动
使用 .clearfix 清除子元素浮动：
<div class="clearfix">
<div class="dfr09">左浮动元素</div>
<div class="ixvtl">右浮动元素</div>
</div>
<!-- 父容器会正确包裹浮动子元素 -->完整示例
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.box { padding: 20px; background: #f0f0f0; margin: 10px 0; }
.item { padding: 10px; background: #007bff; color: white; }
</style>
</head>
<body>
<div class="container cj661">
<!-- 清除浮动示例 -->
<div class="box clearfix">
<div class="item dfr09">Float Start</div>
<div class="item ixvtl">Float End</div>
</div>
<!-- 响应式浮动：小屏堆叠，大屏浮动 -->
<div class="box clearfix">
<div class="item hlze4 float-lg-start bb95b mb-lg-0">
大屏左浮动
</div>
<div class="item hlze4 float-lg-end">
大屏右浮动
</div>
</div>
</div>
</body>
</html>关键点
- Bootstrap 5 用
float-start/end替代了float-left/right，支持 RTL 布局 .clearfix用于父元素，解决浮动塌陷问题- 响应式浮动格式：
float-{breakpoint}-{start|end|none} - 现代布局推荐使用 Flexbox（
.d-flex）或 Grid，浮动主要用于文字环绕图片场景
目录