float: none 仅取消浮动，不修复其他脱离流机制或尺寸问题；需同步调整width、box-sizing、bfc等整条布局链，否则无效。
float: none 本身没失效，但它不负责“还原”其他脱离流的副作用
写了 float: none 后元素看起来还“飘着”或位置不对，不是它没生效，而是你忽略了其他同时起效的布局机制。CSS 中让元素脱离文档流的方式不止 float 一种：position: absolute、position: fixed、display: flex 或 display: grid 容器下的子项，都会让 float（包括 float: none）直接被忽略——规范明确写了：flex/grid 容器中，float 属性无效果。
常见误判场景：
- 父容器用了
display: flex，你还给子元素写float: none→ 它压根不参与计算，自然“没反应” - 元素自己有
position: absolute，此时float被完全无视，float: none也形同虚设 - HTML 中两个
inline-block元素之间有换行或空格，视觉上并排，你以为是浮动残留，其实是空白符渲染导致
float: none 只管当前元素，不管兄弟、不管父容器、不管尺寸链
float: none 的作用非常窄：仅告诉浏览器“这个元素别浮了，按块级默认方式排”。它不会：
- 触发父容器重新计算高度（所以塌陷还在）
- 清除兄弟元素的浮动影响（其他
float: left子项仍脱离流） - 重置
width、margin、padding等尺寸相关属性（原width: 50%还在，小屏下就撑破） - 修复因
box-sizing: content-box导致的宽度溢出（padding和border仍额外加宽）
也就是说，单写 float: none 就像只解开了一个扣子，但衣服还系着另外三颗——不一起松开，根本脱不下来。
响应式切换时，float: none 必须和 width、box-sizing、父容器 BFC 同步生效
在媒体查询里只改 float 是最常踩的坑。真正要动的是整条布局链：
-
float: none是前提，但必须显式写出（不能依赖默认值） -
width: 100%或max-width: 100%—— 原width: 50%不清掉，小屏还是两栏挤在一起 -
box-sizing: border-box要全局统一，否则padding: 16px让实际宽度变成100% + 32px - 父容器得有 BFC，推荐
display: flow-root（现代方案），而不是靠overflow: hidden硬撑（会裁剪box-shadow或transform内容）
漏掉其中任意一项，都可能表现为“写了 float: none 却没变化”或者“变堆叠了但右侧留白/内容溢出”。
打印样式里 float: none 不是可选项，而是必填项
打印预览时，浮动不仅无用，还会放大塌陷问题：float: left 的侧边栏可能整个消失，或文字被截断在纸张外。这时 @media print 中必须显式写：
@media print {
.sidebar, .ad-banner, .figure {
float: none;
width: 100%;
margin: 0 auto;
}
}
注意：不要在打印样式里乱加 clear: both。因为浮动已经被 float: none 干掉了，再 clear 就是清空气——它只对前面真实存在的浮动兄弟生效，前面都没浮动了，clear 就没上下文可作用。
真正容易被忽略的点是：float: none 不是“撤销操作”，它是新声明；而响应式或打印切换的本质，是一整套尺寸、定位、BFC 的协同重置。单独拎出它来调，就像只拧松螺丝却忘了卸下整个支架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
