左右白边是viewport配置不全、默认样式及渲染精度叠加导致的，需写全五个viewport属性、重置body默认margin与盒模型、禁用横向溢出，并优先用flex/grid替代float布局。
左右白边不是浮动没清干净，而是 viewport 配置 + 默认样式 + 渲染精度三者叠加失效的结果；单独靠 clear: both 或 overflow: hidden 基本无效。
viewport meta 必须写全这五个属性
只写 width=device-width, initial-scale=1.0 是绝大多数白边问题的起点。iOS Safari 和 WKWebView（微信/支付宝内嵌页）在软键盘弹出、双击缩放后会残留非整数缩放因子，导致小数像素错位，Grid/flex 边界对不齐视口。
-
maximum-scale=1.0比user-scalable=no更合理：允许用户双击放大一次，但阻止持续拉伸，兼顾可访问性 -
viewport-fit=cover仅在需要全屏沉浸式（如游戏、视频）时启用；普通 H5 删掉它，否则 iOS 会重算安全区，触发额外渲染偏移 - 绝对不要混用已废弃的
target-densitydpi，部分 WebView 会直接忽略整个content字符串
最小可行 meta 写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
body 和根容器必须重置默认盒模型与溢出
浏览器给 body 默认设了 margin: 8px，缩放后这 16px 水平空间会被放大，直接撑出白边。同时未声明 box-sizing 时，padding 和 border 会额外加到 width: 100% 之外。
立即学习“前端免费学习笔记（深入）”；
- 必须在 CSS 入口处统一重置：
* { margin: 0; padding: 0; box-sizing: border-box; } -
body上必须加overflow-x: hidden—— 不能只加在某个子容器，因为溢出可能来自任意层级（比如未约束宽度的<table>或<pre>） - 若使用 Grid 布局，避免
gap设小数（如gap: 0.5px），iOS 渲染精度不足会导致累计误差
浮动元素本身要防宽度超限
右侧白边常是某个浮动元素实际宽度超出视口所致，而非布局逻辑错误。比如 float: left 的盒子设了 width: 50%，又加了 padding: 20px 却没设 box-sizing: border-box，实际占宽就变成 50% + 40px。
- 打开开发者工具，选中疑似浮动元素，在 Computed 面板看
width、padding、border实际像素值 - 用
document.body.scrollWidth > window.innerWidth在控制台快速验证是否真有横向溢出 - 对所有浮动子项统一加
margin: 0和vertical-align: top，防止基线对齐引入额外高度 - 用
calc(100% / 3)替代手写33.333%，减少四舍五入误差
优先用 flex/grid 替代 float，伪元素清除仅作兜底
浮动本就不该用于整体布局，它专为文字环绕设计。现代项目中强行用 float + clear 解决白边，等于在修水管时反复拧紧生锈的旧阀门。
- 父容器改用
display: flex或display: grid，子元素自动参与流式计算，天然无塌陷、无溢出风险 - 若必须兼容老浏览器，用伪元素清除法：
.clearfix::after { content: ""; display: table; clear: both; }—— 注意必须带content，且display: table比block在 IE 下更稳 -
overflow: hidden不是清除方案，只是掩盖问题：内容仍被截断，影响屏幕阅读器和打印样式
真正难处理的是那些藏在第三方组件、<iframe> 或内联 SVG 里的隐性溢出——它们不会响应 box-sizing 重置，得靠 * { outline: 1px solid red } 描边法逐个揪出来。
