浮动布局在移动端应被放弃，因其易导致堆叠错乱、高度塌陷等问题；改用flex或grid更可靠。
浮动布局在移动端直接失效的典型表现
页面元素堆叠错乱、文字换行异常、侧边栏跑到底部，甚至整个布局塌陷——这些不是代码写错了，而是 float 本身依赖文档流脱离机制，在小屏幕、高缩放比或动态 viewport 下极易失准。尤其当父容器没有清除浮动（clear）或未触发 BFC 时，子元素高度塌陷会直接导致后续内容上移。
用百分比宽度替代固定像素时的关键约束
仅把 width: 200px 改成 width: 50% 不够，必须同步处理以下三点：
-
box-sizing必须设为border-box，否则 padding 和 border 会额外撑宽，超出百分比预期 - 所有浮动子元素的百分比宽度之和不能超过 100%，需预留至少 1% 容错（例如两栏用
49.5%而非刚好 50%） - 父容器不能有不定宽的
padding或margin，否则子元素按“可视区域宽度”计算，但实际可用宽度被挤压
媒体查询中 float 的清理时机比想象中更敏感
不要只在 @media (max-width: 768px) 里加 clear: both，而要在断点切换的临界宽度上主动重置浮动行为：
@media (max-width: 480px) {
.sidebar { float: none; width: 100%; }
.main { float: none; width: 100%; margin: 0; }
.container::after { content: ""; display: table; clear: both; } /* 强制重建BFC */
}注意：如果用伪元素清除浮动，::after 必须放在媒体查询内重写，否则 PC 端的清除规则会覆盖移动端的 float: none 设置。
立即学习“前端免费学习笔记（深入）”；
真正该放弃 float 的信号
当你开始写三层嵌套的媒体查询、反复调整 margin-left 补位、或者发现 iOS Safari 中 float 元素偶尔不响应 touch 事件时——说明已越过维护阈值。现代方案里，display: flex 或 display: grid 的响应式控制粒度更细，且无需手动清除。float 在移动端不是“调不好”，而是“不该用”。
