横屏浮动留白突增是因html空白、box-sizing不一致及父容器未触发bfc导致内容溢出；最优解是改用display: flex，或至少用display: flow-root创建bfc。
移动端横屏时浮动布局突然多出左右留白，不是 viewport 设置问题，而是浮动元素在宽度重算过程中因 HTML 空白、box-sizing 不一致或父容器未触发 BFC 导致内容实际溢出视口。直接改用 display: flex 是最稳的解法，不建议在横屏分支里单独 hack 浮动。
为什么横屏下浮动留白会突然变大
横屏触发 viewport width 变更（如从 375px → 667px），但浮动子项仍按旧逻辑计算：HTML 换行空格被渲染为 4–8px 间隙 × 子项数，加上 width: 25% 在非整除宽度（如 667px ÷ 4 = 166.75px）下四舍五入误差累积，极易突破 100%。浏览器把这部分“多出来”的像素算进 document.body.scrollWidth，于是强制横向滚动条+两侧留白。
- 常见现象：
scrollWidth > innerWidth，但开发者工具里看不出明显超宽元素 - 调试技巧：临时加
outline: 1px solid red到父容器，看子项是否“凸出”边界 - 别信“只在横屏加
font-size: 0”——这治标不治本，且可能让按钮文字消失
伪元素清除法在横屏下依然失效的真相
.clearfix::after 能闭合浮动，但无法修复因 box-sizing: content-box 导致的 padding/border 溢出。横屏后父容器 width 变大，但若它本身有 padding: 16px 且未设 box-sizing: border-box，子项 width: 100% 实际占满的是 100% + 32px，伪元素清得再干净也拦不住溢出。
- 必须同步检查全局是否已声明
* { box-sizing: border-box; } - 如果项目没配这个，仅靠
::after清除，横屏时留白大概率照常出现 - 老项目临时补救：给浮动父容器加
max-width: 100vw+overflow-x: hidden，但会裁剪 tooltip 等绝对定位内容
display: flow-root 比 overflow:hidden 更适合横屏场景
overflow: hidden 虽能触发 BFC 包住浮动，但在横屏下容易意外裁剪弹出菜单、日期选择器等横向溢出组件；display: flow-root 同样创建 BFC，但不改变溢出行为，也不影响 z-index 层叠，是横屏浮动容器的清洁解法。
- 兼容性够用：Chrome 58+、Firefox 57+、Safari 10.1+、iOS Safari 10.3+
- 写法极简：
.float-container { display: flow-root; }，删掉所有clearfix类和overflowhack - 注意：不能和
float同时作用于同一元素——flow-root本身不浮动，只负责包裹
真正一劳永逸：三步替换浮动为 flex
横屏适配不是浮动的使用场景，而是它的压力测试。与其反复调 clear、zoom、font-size: 0，不如直接迁移。以下改动不影响 DOM 结构，CSS 替换即可生效：
- 删掉父容器所有
float、clear、overflow相关声明 - 父容器加
display: flex和flex-wrap: wrap（防换行） - 子项去掉
float: left/right，用margin-right: auto或justify-content: space-between控制分布
比如导航栏：原 .nav-item { float: left; } 改为 .nav { display: flex; justify-content: space-between; }，子项自动对齐，横屏缩放、字体放大、DPI 变化全无影响——这才是移动端该有的健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
