float: none 仅取消元素自身浮动，不修复父容器塌陷、不重置宽高边距；在 flex/grid 中无效；需配合 width、margin 等属性重置才生效，且 clearfix 必须作用于浮动元素的直接父容器。
float: none 不是“清除”，而是回归默认流
它不是万能清除开关，只是告诉浏览器：“这个元素别浮了，按 display: block 的默认方式排”。几乎所有块级元素（div、section、p）初始 float 就是 none，显式写它不触发重排、不修复塌陷、不影响兄弟元素——只改自己。
响应式断点里写 float: none 必须配 width 和 margin 重置
常见错误是只在 @media (max-width: 768px) 里写 float: none，结果小屏下单列却只占三分之一宽度，或顶部多出大片空白。原因很直接：
- 原桌面端用
float: left; width: 33.33%并排，float: none后width没变，仍维持窄宽 - 原用于分隔的
margin-right: 20px还在，堆叠时变成上下间距 - 没设
box-sizing: border-box，padding+width: 100%可能溢出
正确写法必须成组出现：
@media (max-width: 768px) {
.sidebar, .main {
float: none;
width: 100%;
margin: 0;
padding: 0;
}
}
float: none 在 flex/grid 容器里完全无效
如果父容器是 display: flex 或 display: grid，子元素上的 float（包括 float: none）会被规范忽略。开发者工具里 Computed 面板会显示 “not applicable”。此时：
立即学习“前端免费学习笔记（深入）”；
- 想让子项垂直堆叠？改父级
flex-direction: column，别碰float - 想单列网格？改
grid-template-columns: 1fr，不是加float: none - 误以为写了
float: none就能“修复布局”，实际什么都没发生
float: none 和 clearfix 完全不是一回事
float: none 管自己，.clearfix 管父容器高度。漏掉任何一环都会出问题：
- 只给子元素加
float-none，父容器没清浮 → 背景/边框照样不显示（塌陷还在） -
.clearfix必须加在**浮动元素的直接父容器**上，加在外层或元素自身都无效 - 用了响应式浮动类（如
float-lg-start），清除也得用响应式类（如clearfix-lg），否则小屏下可能多出空白
真正容易被忽略的，是把 float: none 当成布局自洽的终点——它只是起点。关浮动之后，width 是否随视口缩放、margin 是否残留、父容器是否仍处于 BFC 缺失状态，这些才决定最终是否真能“重置”成功。
