浮动布局在移动端横向溢出是盒模型、空白间隙、高度塌陷三者叠加的必然结果；font-size: 0仅临时消除换行间隙但不可靠，应改用flex或flow-root等现代方案。

浮动布局在移动端横向溢出不是“偶尔发生”，而是盒模型、空白间隙、高度塌陷三者叠加的必然结果——只要用了 float 且没同步处理这三点，小屏下大概率出现滚动条。

为什么 font-size: 0 能临时压住浮动间隙但不推荐长期用

浮动

之间的换行或空格会被浏览器当作文本节点渲染，产生约 4–8px 的不可见间隙。4 个 width: 25% 的项，光间隙就可能多出 20px+，直接突破视口宽度。

• font-size: 0 让这些文本节点“缩成点”，间隙消失；子元素再单独设 font-size: 14px 恢复文字大小
• 但它只治标：一旦 JS 动态插入新浮动项、或内容含  、 等内联内容，间隙立刻回归
• 更麻烦的是，它会让 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 失效。

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

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

下载

• 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 差值，基本能锁定根因。

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