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，浮动主要用于文字环绕图片场景