float: none 并非清除浮动，而是让元素回归文档流，默认块级行为；但它不解决塌陷、不重排兄弟元素、也不影响父容器高度，若仍显浮动，常因父容器为flex/grid（float被规范忽略）、元素含position: absolute、或残留width/margin等样式。
float: none 在媒体查询里不是“清除浮动”，而是让元素放弃脱离文档流，回归块级默认行为——但它自己不解决塌陷、不重排兄弟元素、也不管父容器高度。
为什么写了 float: none 还像在浮动？
常见错觉不是 float: none 失效，而是你忽略了其他脱离文档流的机制：
- 父容器用了
display: flex或display: grid——此时子元素的float（包括float: none）被规范忽略，Computed 面板里会标 “not applicable” - 元素本身有
position: absolute，float根本不起作用，float: none自然也无效 - HTML 中存在空白符 +
display: inline-block，视觉上并排，误判为浮动残留 - 没删掉原有
margin-right或width: 30%，导致元素缩在角落或撑不开
@media 里只写 float: none 是半截子操作
单独改 float 值几乎必然出问题，必须同步处理四项：
- 显式声明
float: none（不能依赖初始值，尤其在旧版 IE 中） - 重设
width: 100%或max-width: 100%（否则残留百分比宽，小屏下只占三分之一） - 确保父容器有清除机制：
overflow: hidden或display: flow-root（否则高度仍为 0，背景/边框消失） - 统一
box-sizing: border-box（避免padding和border导致实际宽度超 100%）
float: none 在 flex/grid 容器中完全无效
这是 CSS 规范明确规定的：float 属性在 display: flex 或 display: grid 的父容器下会被忽略。你在子元素上写 float: none，浏览器直接跳过，既不报错也不生效。
想让 flex 子项垂直堆叠？改父级的 flex-direction: column；想让 grid 子项单列？改 grid-template-columns: 1fr。别碰 float，它在这里没有存在感。
真正容易被忽略的，是 float: none 只改当前元素的定位状态，却不管它周围是否还有一堆浮动兄弟、父容器是否仍在 BFC 缺失状态、DOM 结构是否还能支撑你当前的清除逻辑——这些才是响应式切换时崩盘的真正原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
