Bootstrap 5中浮动必须配合.clearfix清除，否则父容器高度塌陷；使用.float-start/.float-end替代已移除的.float-left/.float-right；.clearfix基于display: flow-root，兼容IE11需额外伪元素CSS；清除仅作用于直接父容器，嵌套浮动需逐层处理。
Bootstrap中浮动类和清除浮动必须配合使用，否则父容器高度塌陷是必然结果——这不是bug，而是CSS浮动的底层行为。
Bootstrap 5 的浮动类名已彻底变更
直接用 .float-start 和 .float-end，别再写 .float-left 或 .float-right。后者在 Bootstrap 5 中已被移除，浏览器会忽略，页面看起来“没反应”就是这个原因。
-
.float-start在中文（LTR）页面向左浮动，在阿拉伯语（RTL）页面自动向右，语义更准确 - 响应式写法如
.float-md-none、.float-lg-end是断点“及以上”生效，不是“仅在该断点” - 浮动元素本身不参与文档流，所以文字能绕排，但父容器看不见它——这是后续所有问题的起点
清除浮动只能加在父容器上，且只有一种推荐方式
给浮动子元素的**直接父容器**加 .clearfix 类。加错位置（比如加在子元素自己身上）或加在 flex/grid 容器上，都无效。
- Bootstrap 5 的
.clearfix底层是display: flow-root，轻量、无裁剪副作用，Chrome 64+/Firefox 63+/Safari 15.4+ 均支持 - 如果还要兼容 IE11，不能只靠
.clearfix，得额外补一段 B3 风格的伪元素 CSS：.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } - 别用
overflow: hidden伪装清除浮动——下拉菜单、阴影、tooltip 一旦越界就会被砍掉，现场很难排查
清除浮动后内容还重叠？大概率是 z-index 搞错了
清除浮动只解决“父容器高度为0”，不解决“谁盖在谁上面”。浮动图片旁的文字能绕开，但按钮却浮在图上，往往是因为按钮用了 position: relative 却没设 z-index，而浮动元素的视觉层级在某些浏览器中偏高。
- 浮动元素本身不响应
z-index（它不是定位上下文），别对它设z-index - 需要前置的元素（如按钮、弹窗）应显式加
position: relative; z-index: 1 - 若父容器本身有背景色或边框，且清除后仍不显示，先检查是否被其他样式（如
height、min-height）掩盖了塌陷现象
真正容易被忽略的是：清除浮动不是“一劳永逸”的操作，它只对当前父容器生效；嵌套浮动时，每一级浮动容器都得单独处理 .clearfix，漏一层，塌陷就从那一层开始向下传导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
