float-none仅取消本元素浮动，不解决父容器塌陷；清除浮动须用clearfix类且必须加在浮动元素的直接父容器上，响应式场景需匹配断点如clearfix-md。
float-none 不是清除浮动，它只是取消当前元素的浮动
float-none 的作用非常明确：把当前元素的 float 值设为 none，让它回归文档流。但它对父容器高度塌陷、兄弟元素错位等“浮动遗留问题”完全无感——这些得靠 .clearfix 或其他 bfc 触发方式来解决。
常见错误现象：float-none 加了但父容器背景还是看不见、下方内容跑上来，误以为“清除失败”。其实根本没清，只是子元素自己不浮了，而父容器仍被旧浮动状态“欺骗”着。
- 如果你用的是响应式浮动类（比如
float-md-start），想在小屏取消浮动，应搭配float-sm-none，而不是指望float-none覆盖所有断点 -
float-none本身不带断点前缀；如需响应式控制，必须显式写成float-sm-none、float-lg-none等 - 它不能替代
.clearfix，两者职责完全不同：一个管“本元素”，一个管“父容器布局上下文”
清除浮动必须加在浮动元素的直接父容器上
浮动导致父容器高度塌陷，是因为脱离文档流后，父容器“感知不到”子元素存在。.clearfix 就是专门用来修复这个的，它的原理是通过伪元素 + clear: both 强制撑开父容器。
关键限制：这个类必须加在**浮动元素的直接父容器**，不能加在更外层、也不能加在浮动元素自身。
- 错误写法：
<div class="float-start"></div><div class="clearfix"></div>—— 这个.clearfix和浮动元素不在同一父级，毫无作用 - 正确写法：
<div class="clearfix"><div class="float-start"></div></div> - 如果用了响应式浮动（如
float-lg-start），且只在大屏浮动，那小屏下其实不需要清除——此时应使用响应式清除类，如.clearfix-lg，避免小屏无浮动却强行触发清除逻辑，造成意外空白
为什么 float-none + clearfix 一起用还出问题？检查是否漏掉响应式匹配
典型场景：你写了 float-sm-start float-md-none，期望小屏左浮、中屏起取消浮动；同时给父容器加了 .clearfix。结果小屏正常，中屏文字却上移、背景消失——问题就出在 .clearfix 是无条件生效的，而浮动行为已随断点变化，清除逻辑没跟着变。
-
.clearfix是全局生效，不管当前有没有浮动；若浮动只在某断点存在，应改用.clearfix-{breakpoint}，例如.clearfix-sm对应float-sm-start - 没有
.clearfix-xs，最小断点是sm（576px），所以“始终清除”只能用无前缀的.clearfix，但要确认这是否符合你的断点策略 - 别试图用
float-none来“绕过”清除——它不解决父容器塌陷，反而可能让清除逻辑和实际浮动状态脱节
清除后内容重叠？大概率是 z-index 或层叠上下文没理清
.clearfix 只负责位置归位，不干预视觉层级。如果你发现按钮盖在浮动图片上、文字被遮住，不是清除没做好，而是层叠顺序没控制好。
- 浮动元素本身不能设
z-index（它不是定位元素），但它的内容（如背景、边框）默认处于块级流和行内流之间，浏览器渲染时容易“视觉偏高” - 需要前置的内容（比如覆盖图标的按钮），应加
position: relative; z-index: 1；不要给浮动元素本身加z-index - 如果整个区域需要独立层叠上下文，可考虑在父容器上用
style="position: relative"或现代写法display: flow-root（注意 IE 不支持）
float-md-end 却用 .clearfix（非响应式），等于在小屏也执行了一次无效清除；而写 float-none 却期待它能“连带修复父容器”，只会让布局问题更隐蔽。 
