Bootstrap 5 用 .float-start/.float-end 替代旧版左右浮动类，支持 RTL 适配和响应式断点；父容器塌陷需加 .clearfix 清除浮动，避免手动清浮或 overflow 隐藏；注意 z-index 层叠问题及正确作用于父容器。
Bootstrap 5 怎么给元素加左/右浮动
直接用 .float-start 或 .float-end 类就行，不用写自定义 css。这两个类在 bootstrap 5 中替代了旧版的 .float-left 和 .float-right，底层对应的是 float: left 和 float: right。
常见错误现象：写了 .float-left 没效果——那是 Bootstrap 4 的写法，5 里已废弃，浏览器会忽略。
-
.float-start在 LTR 页面（如中文）中向左浮动，在 RTL 页面中自动向右，语义更准确 -
.float-end同理，适配双向文本，比硬写right更健壮 - 响应式支持：可叠加
.float-sm-start、.float-md-none等，在不同断点控制浮动行为
为什么父容器高度塌陷？怎么清除浮动
浮动元素脱离文档流，导致父容器“看不见”它，高度收为 0——这是所有浮动布局最常踩的坑，和是否用 Bootstrap 无关，但 Bootstrap 提供了标准解法。
推荐只用一种方式：给父容器加 .clearfix 类，这是 Bootstrap 官方封装好的清除浮动方案，内部用伪元素 + clear: both 实现，兼容性好、无副作用。
- 别手动加空
<div></div>，既冗余又破坏语义 - 别靠
overflow: hidden强撑，可能意外裁剪阴影、下拉菜单或定位元素 - 别对子元素单独设
clear: both，容易漏掉、难维护，且无法解决父容器塌陷根本问题
清除浮动后内容还重叠？检查层叠上下文
清除浮动只解决“位置错位”，不解决“视觉遮挡”。如果你发现文字或按钮盖在浮动图片上，大概率是 z-index 或层叠上下文惹的祸。
典型场景：一个 <img class="float-start"> 和后面一段 <p></p>，文字明明绕开了，但按钮却“浮”在图上——因为按钮用了 position: relative 且没设 z-index，而浮动元素默认在普通流层，但某些浏览器渲染时会让其视觉层级偏高。
- 浮动元素本身没有 z-index，但它的内容（如 background、border）在块级元素下方、行内内容上方，这是 CSS 规范行为
- 若需精确控制遮盖关系，给需要前置的元素显式加
position: relative; z-index: 1 - 避免对浮动元素本身设
z-index（无效），它不是定位元素
响应式浮动怎么切得准
Bootstrap 的响应式浮动类（如 .float-lg-end）生效逻辑是“移动断点及以上才启用”，不是“仅在该断点生效”。这点容易误判。
比如你写：<div class="float-start float-md-end">，意思是：小屏左浮动，中屏及更大屏右浮动。但如果删掉 <code>.float-start，只留 .float-md-end，那小屏下它就完全不浮动（即 float: none）。
- 必须显式写出基础断点类（如
.float-start），否则默认是float: none - 断点类之间互斥，不会叠加；后写的不会覆盖前写的，而是按媒体查询条件触发
- 调试时可用浏览器开发者工具看 computed 样式，确认
float值是否被某条媒体查询命中
.float-start + .clearfix 这套组合依然最轻量、最可靠。真正容易被忽略的是：清除浮动不是“加个类就完事”，得确保它加在**正确父容器上**——加错一层，整个区块就塌。
