.clearfix必须加在浮动元素的直接父容器上才有效；加在子元素自身无效，因浮动导致父容器高度塌陷是css固有特性，.clearfix仅通过触发bfc让父容器重新包含浮动子元素。
父容器加 .clearfix 才有效，加在子元素上没用
浮动塌陷不是 Bootstrap 的 bug，而是 float 本身的特性：浮动元素脱离文档流，父容器“看不见”它们的高度。.clearfix 的唯一作用就是让父容器重新感知子元素——但它必须加在**浮动元素的直接父容器**上。
- 错误写法：
<div class="float-start clearfix"> —— 这是把类加在浮动子元素自身，<code>.clearfix对它自己不起作用 - 正确写法：
<div class="clearfix"><div class="float-start"></div></div> - 如果父容器已有
height或min-height，塌陷被掩盖，容易误判“不需要.clearfix” - Flex 或 Grid 容器（如
class="d-flex"或class="row"）天然不塌陷，加.clearfix是冗余，且无效 -
.float-start在中文（LTR）页面向左浮动，在阿拉伯语（RTL）页面自动向右，语义更准确 - 响应式写法如
.float-md-end表示“中屏及以上才启用右浮动”，不是“仅在中屏生效” - 如果只写
.float-lg-end而没配小屏 fallback（比如.float-start），小屏下元素就不浮动，布局可能错乱 - 注意：浮动元素在
display: flex或display: grid父容器里会被浏览器忽略——这是 CSS 规范行为，不是框架问题 - Bootstrap 5+ 内置了
.d-flow-root工具类，一行即可：<div class="d-flow-root"><div class="float-start"></div></div> - 它比
overflow: hidden安全：不会裁剪position: absolute子元素、阴影、下拉菜单等溢出内容 - 比伪元素版
.clearfix更轻量：不生成额外盒模型，减少重排开销 - 兼容性需留意：iOS Safari 15.4+、Chrome 64+、Firefox 58+ 支持；IE 完全不支持，若仍需兼容 IE11，得回退到伪元素写法
- 别给浮动元素设
z-index（无效），它是非定位元素 - 想让某个元素“浮在最上”，给它加
position: relative和显式z-index（如z-index: 1） - 常见陷阱：一个
<img class="float-start">后跟<button></button>，按钮没设定位，就可能被浮动图片视觉覆盖 - 移动端尤其明显：某些 WebView 渲染时对浮动层叠处理更敏感，建议在关键交互区域主动控制
z-index
.float-start 和 .float-end 是 Bootstrap 5 的写法
Bootstrap 5 已废弃 .float-left 和 .float-right。继续用旧类名，浏览器会忽略，浮动根本不会生效。
现代项目优先用 display: flow-root 替代 .clearfix
.clearfix 是兼容旧浮动的兜底方案；display: flow-root 是专为解决塌陷设计的现代值，语义清晰、无副作用。
清除浮动后内容还重叠？检查层叠上下文
.clearfix 只解决“位置错位”，不解决“视觉遮挡”。浮动元素本身没有 z-index，但它的渲染层级介于普通块级元素和行内内容之间，容易导致按钮、文字盖在图片上。
.clearfix——它不仅没用，还暴露了布局方式没同步升级的问题。
