float 不是移动端适配不好，而是设计初衷就不匹配布局需求；它专为图文环绕而生，用于页面骨架会导致塌陷、掉行、事件失效等问题，且与 flex/grid 冲突。
float 在移动端根本不是“适配不好”，而是设计初衷就不匹配
float 是为图文环绕（比如让文字绕着一张图片排版）而生的，不是用来搭页面骨架的。你在 PC 时代用它做两栏、三栏，是凑合；放到移动端，屏幕一缩、内容一变、用户一缩放，它就立刻暴露“非布局工具”的本质。
常见错误现象包括：侧边栏突然掉到主内容下方、父容器高度塌陷导致背景色消失、iOS Safari 里点击浮动按钮没反应、安卓 WebView 中文字换行错位——这些都不是你写错了 clear，而是 float 的行为逻辑和移动端的流式、弹性、动态视口天然冲突。
- 浮动元素脱离文档流，但又不完全脱离（不像
position: absolute），导致父容器无法自动包裹，尤其在内容高度不确定时极易崩 - 小屏下宽度不够，float 元素会“掉行”，但不会像
flex-wrap那样智能重排，也不会触发父容器重绘高度 - 配合
vw/rem使用时，百分比宽度计算受父级padding干扰严重，且不同浏览器解析偏差更大
clear 在 flex 或 grid 容器里完全失效，别白费劲了
如果你已经把外层容器设成了 display: flex 或 display: grid，再给子元素加 float: left 和 clear: both，等于在自动挡车上猛踩离合——系统直接忽略。
现代布局引擎接管排列后，float 的“脱离文档流”机制被绕过，clear 失去作用对象。此时伪元素清除（如 .clearfix::after）也无效，不是写法不对，是规则已不适用。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否用了
display: flex或display: grid，是则必须移除所有float和clear - 若旧代码残留
float，临时回退可用display: block，但只是遮羞布，不是解法 - 不要在媒体查询里只改
float: none却漏掉width和margin重置，否则小屏仍堆叠错位
用 flex 替代 float 不是“换个写法”，而是换一套计算逻辑
从 float: left 改成 display: flex，表面看只是删几行、加一行，实际改变了整个布局的控制粒度：对齐、换行、间隙、等高、顺序，全部由声明式属性驱动，不再依赖文档流破坏与手动修复。
例如实现响应式双列卡片列表，float 方案要写三套样式（PC 浮动+宽宽、平板取消浮动+调宽、手机全宽+清空 margin），而 flex 只需一段：
.card-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 calc(50% - 0.5rem); min-width: 280px; }-
flex-basis中的百分比基于父容器宽度，不受 viewport 缩放影响，横竖屏切换也不崩 -
gap统一管理间距，不用再算负margin或担心外边距塌陷 -
order属性可直接调整渲染顺序，无需结构挪动或 JS 搬运 DOM - 等高列是默认行为，不用
min-heighthack 或 JS 计算
还在用 float？先问自己这三个信号有没有出现
不是不能跑，而是维护成本已远超收益。以下任一情况出现，说明你已在浮动泥潭里越陷越深：
- 开始写三层嵌套媒体查询，只为让同一组元素在 320px/480px/768px 下表现一致
- 每次改一个
margin-left，都要同步检查侧边栏、页脚、导航栏是否错位 - 发现 iOS Safari 中某个浮动按钮偶尔点不动，查半天才发现是 touch 事件穿透到了底层
真正棘手的不是“怎么让它显示对”，而是“为什么改这里，那里就崩”。浮动的副作用是隐式的，调试时你永远不知道下一个塌陷点在哪。
