浮动布局在移动端横向溢出是盒模型、空白间隙、高度塌陷三者叠加的必然结果；font-size: 0仅临时消除换行间隙但不可靠，应改用flex或flow-root等现代方案。
浮动布局在移动端横向溢出不是“偶尔发生”，而是盒模型、空白间隙、高度塌陷三者叠加的必然结果——只要用了 float 且没同步处理这三点，小屏下大概率出现滚动条。
为什么 font-size: 0 能临时压住浮动间隙但不推荐长期用
浮动 <div> 之间的换行或空格会被浏览器当作文本节点渲染，产生约 4–8px 的不可见间隙。4 个 <code>width: 25% 的项，光间隙就可能多出 20px+，直接突破视口宽度。
-
font-size: 0让这些文本节点“缩成点”，间隙消失；子元素再单独设font-size: 14px恢复文字大小 - 但它只治标：一旦 JS 动态插入新浮动项、或内容含
<span></span>等内联内容，间隙立刻回归 - 更麻烦的是，它会让
line-height、vertical-align行为变得不可预测，尤其在表单、按钮组合中容易错位 - 真正该做的是换用
display: flex——它天然忽略 HTML 空白，且flex-wrap: wrap更可控
box-sizing: border-box 必须覆盖伪元素才有效
只写 * { box-sizing: border-box; } 不够。移动端老内核（如微信 X5 v3.7 以下）中，::before 和 ::after 仍按 content-box 计算，导致清除浮动的伪元素本身又撑宽容器。
- 正确写法是：
* , *::before, *::after { box-sizing: border-box; } - 若项目不敢全局改，至少给高频出问题的类加：
.card, .panel, input, textarea { box-sizing: border-box; } - 检查方式：在 DevTools 的「Computed」面板里确认目标元素的
box-sizing值，不是看样式规则里有没有，而是看最终计算值是否为border-box - 特别注意：如果父容器有
padding或border，而子浮动项设了width: 100%，那实际宽度就是100% + padding×2 + border×2——哪怕box-sizing正确，也照样溢出
display: flow-root 是现代浮动塌陷的首选解法
浮动导致父容器高度坍塌，本质是它脱离了文档流，父容器失去高度锚点。过去常用 overflow: hidden 触发 BFC，但在移动端副作用明显：fixed 定位异常、阴影被裁、z-index 失效。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是专为此设计的值，Chrome 64+ / Firefox 58+ / Safari 15.4+（iOS 15.4+）均已支持 - 它创建 BFC，但不改变溢出行为，绝对定位、阴影、负 margin 提示框全保留
- 兼容性兜底写法：
parent { display: flow-root; } @supports not (display: flow-root) { parent { overflow: hidden; } } - 别再用
clear: both单独写在子项末尾——清除动作必须作用于父容器自身；标准clearfix必须包含content: ""、display: table、clear: both、height: 0四项
移动端横向溢出常被误判为“CSS 写错了”，其实是结构失控
很多开发者看到滚动条第一反应是加 overflow-x: hidden，但这只是掩盖问题。真正的溢出源往往藏在看似无关的地方：
-
默认有margin: 8px，在视口缩放时会被放大，直接导致scrollWidth > innerWidth - 未设
max-width: 100%的图片、SVG 或伪元素，哪怕只多出 1px，也会触发滚动条 -
.row类在 Bootstrap 4 中自带margin-left: -15px，若没被.container包裹，负边距会拖出视口 - Flex/Grid 容器中的子元素写了
float，该属性会被浏览器忽略，但开发者可能误以为它还在生效，从而漏掉对真实布局逻辑的排查
最省力的调试方式：给疑似父容器加 outline: 1px solid red，一眼看出子项是否“凸出来”；再配合「Computed」面板比对 width 和 scrollWidth 差值，基本能锁定根因。
