移动端应弃用 float 改用 flex：float 依赖固定宽度且不处理自适应，易因视口缩放、字体变大等导致掉行或消失；flex 可省去大量 hack 和调试，三步即可迁移，但需注意 js 隐式假设及第三方组件兼容性。

移动端布局里继续用 float，不是写法不对，是底层逻辑已经错位——它压根不处理“自适应”，只负责“往边上贴”。直接切到 display: flex，能省掉 80% 的清除、重置、hack 和夜间调试。

float 在移动端为什么会“掉行”或“消失”

这不是渲染 bug，而是 float 的行为被移动端动态条件放大了：视口缩放、字体变大、硬件加速触发、1px 计算误差，都会让 float: left 的元素突然换行，或者父容器 offsetHeight 变成 0。

• float 依赖固定宽度，但移动端宽度是流式的，width: 50% + padding 就可能超 100%，直接掉行
• iOS 开启「更大字体」后，文字撑开导致浮动项宽度溢出，clear: both 在微信 X5 内核里常失效
• 安卓 WebView 4.4+ 对 float + inline-block 混用有渲染错位 bug
• 所有浮动元素脱离文档流，父容器无法自动包裹高度，overflow: hidden 清除法会意外裁剪下拉菜单或阴影

flex 替代 float 的三步实操（不改 HTML）

老项目迁移成本极低，iOS Safari 9+、Chrome for Android 4.4+、微信 X5 内核 6.8+ 全支持。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 删掉父容器上所有浮动相关声明：float、clear、overflow: hidden（那个“清除 hack”可全删）
• 给父容器加 display: flex（默认 flex-direction: row，行为和 float: left 一致）
• 子元素去掉 float，用原生 flex 属性替代：
  • justify-content: space-between 替代左右浮动 + 手动 margin
  • align-items: center 替代 line-height 或 vertical-align 垂直居中
  • flex: none 防止图标/按钮被压缩，比 float: left 更可控

哪些地方容易踩坑（尤其 JS 逻辑依赖）

语法能换，但业务逻辑未必兼容。真正卡住的往往不是 CSS，而是 JS 里那些没明说的隐式假设。

• JS 如果读取了 getBoundingClientRect() 或 offsetLeft，而这些值在 float 下和 flex 下可能不同，需验证
• 旧代码若靠 float 触发 BFC 来防止 margin 合并，换成 flex 后 BFC 依然存在，但行为逻辑已变，别以为“高度撑开了就没事”
• 第三方 UI 组件（比如某些老版弹窗、轮播）内部硬编码了 float，替换容器后要检查子项是否还带 float: left —— 浏览器会优先执行 float，再套 flex，结果不可控
• gap 在 iOS 14.5+ 才支持，旧版得回退到 margin-right: 12px + :not(:last-child)，别漏掉

真正在意的不是“能不能跑”，而是“改一处，三处崩”

浮动的副作用是隐式的：它不报错，但会让高度计算、事件区域、缩放响应、RTL 支持全部变得脆弱。你调通了一个断点，可能只是掩盖了另一个更难复现的错位。Flex 不是“更潮的写法”，它是把布局控制权从“手动修补”收回到“声明式定义”——这中间差的不是几行代码，是调试时间、上线风险和后续维护成本。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！