基于float的栅格系统内容溢出视口出现水平滚动条如何解决？

• 你的全屏容器.container-full没有设置左右内边距抵消.row的左右负外边距，.row向左右各延伸的0.75em直接超出视口范围，是出现横向滚动条的核心原因
• 未全局统一盒模型，元素宽度计算受padding、border影响出现偏差
• 浏览器默认给body元素设置的默认外边距也会加剧宽度溢出问题

首先添加全局基础样式，统一盒模型并清除浏览器默认样式：

/* 全局统一盒模型，避免padding、border撑大元素宽度 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 图片自适应列宽，避免撑破容器 */
img {
  max-width: 100%;
  display: block;
}

再修改你的.container-full样式，添加左右内边距抵消row的负margin：

.container-full {
    width: 100%;
    /* 新增：值和row的负margin对应，抵消后row刚好贴合容器边缘 */
    padding-left: 0.75em;
    padding-right: 0.75em;
}

你原有其他CSS、HTML代码不需要改动，就能实现预期效果：列之间保留1.5em的间距（相邻列的左右padding相加），最左、最右侧的内容边缘和视口完全贴合，不会出现横向滚动条。

可选临时方案 #

如果你不想修改容器的padding规则，也可以给.container-full添加overflow-x: hidden属性，直接裁剪超出的横向内容。但该方案属于强制隐藏，没有从根源解决宽度计算问题，更推荐上方的标准栅格实现方案。

内容的提问来源于stack exchange，提问作者Earl_Jackson