移动端用float+margin会导致缩放错乱、文字重排、滚动条异常及父容器高度塌陷，iOS Safari和Android Chrome上易出现布局断层、DOM渲染不全、右侧内容截断等问题，必须配合清除浮动或改用flex/grid布局。
移动端用 float + margin 会出什么问题
在 iOS Safari 或 Android Chrome 上，float 配合 margin-left 的老式写法容易触发缩放错乱、文字重排或滚动条异常——尤其当页面有 viewport 缩放、输入框聚焦、软键盘弹出时。更麻烦的是，float 元素脱离文档流后，父容器高度塌陷，若右侧内容区高度低于左侧，整个布局就“断层”了。
常见错误现象：Uncaught TypeError: Cannot read property 'offsetHeight' of null（其实是 DOM 渲染不全导致 JS 获取失败），或右侧区域被截断、只显示半屏。
- 必须给父容器加
overflow: hidden或伪元素清除浮动，否则高度不可控 -
margin-left值写死像素（如200px）在高 DPI 屏上会显得过窄，用rem或vw又难对齐 - Android 4.4 WebView 中
float和box-sizing: border-box组合可能失效
flex 布局在移动端的兼容底线和写法
现代移动端（iOS 9+、Android 4.4+）原生支持 display: flex，但要注意 Safari 8–9 对 flex-wrap 和 flex-basis 的解析有偏差，别用 flex: 0 1 auto 这类复杂值。
最稳写法是明确声明 flex-shrink 和宽度：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; }
.left { flex: 0 0 80px; } /* 不缩放、不增长、固定 80px */
.right { flex: 1; } /* 占满剩余空间，等价于 flex: 1 1 0% */- 别省略
flex-shrink: 0，否则 iOS Safari 可能强行压缩左侧栏 - 避免用
width: calc(100% - 80px)配合flex，CSS 解析顺序冲突会导致右侧宽度计算错误 - 如果要支持微信内置浏览器（X5 内核），需加
-webkit-box-flex: 1作降级 fallback
为什么 grid 在部分安卓低端机上慎用
display: grid 看起来最干净：.left { width: 80px; } + .right { grid-column: 2; }，但实际踩坑不少：
- Android 6–7 的系统浏览器（非 Chrome）不支持
grid-template-columns: 80px 1fr，会整行回退成 block 流 - 某些定制 ROM（如华为 EMUI 5.x）的 WebView 对
grid-area解析异常，右侧区域直接消失 - 用
grid时若父容器没设height，且子项含图片或异步加载内容，容易触发“闪白”或重绘延迟
真要用 grid，务必加降级：
@supports (display: grid) {
.container { display: grid; grid-template-columns: 80px 1fr; }
}
@supports not (display: grid) {
.container { display: flex; }
}响应式下左侧宽度该用 px 还是 rem
纯用 px 在 iPhone SE（320px 宽）上左侧 80px 占比 25%，但在 Pixel 7（412px）上只剩 19%，视觉失衡；全用 rem 又受限于根字体大小是否动态调整。
折中方案：用 minmax() 配合视口单位
.left { flex: 0 0 minmax(64px, 20vw); }-
64px是最小安全宽度（满足触控点击热区 44×44px 的一半余量） -
20vw在大屏上最多占 20%，避免侧栏过宽挤占内容 - 别用
%直接设宽度，移动端 viewport 缩放时百分比会漂移
真正容易被忽略的点：所有方案都默认你已设置 viewport meta，且没开 user-scalable=yes——一旦允许用户缩放，任何基于视口的布局都会失准。要么锁死缩放，要么改用 JS 动态监听 visualViewport 并重算宽度。
