使用百分比宽度和overflow属性可解决CSS页面在不同屏幕下的元素溢出问题，通过设置width: 100%、max-width、box-sizing及overflow: hidden或auto，结合viewport元标签和flex布局，实现响应式设计，避免横向滚动。
当CSS网页在不同屏幕尺寸下出现元素溢出时，通常是因为固定宽度布局或未正确处理容器的尺寸响应。通过合理使用overflow属性和百分比宽度，可以让页面内容自适应各种设备，避免横向滚动或内容截断。
1. 使用百分比宽度实现弹性布局
将元素的宽度设置为百分比，而非固定像素值，可以让其根据父容器或视口大小自动调整。
- 例如：width: 100%; 让元素填满其父容器，同时随屏幕缩放
- 使用 max-width: 1200px; 可防止在大屏幕上过宽，保持可读性
- 配合 box-sizing: border-box; 确保padding和border包含在宽度内，避免意外溢出
示例代码：
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.column {
width: 50%;
float: left;
padding: 10px;
box-sizing: border-box;
}
2. 合理使用 overflow 控制溢出行为
overflow 属性用于控制内容超出容器时的显示方式，是排查布局问题的重要工具。
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden; 隐藏溢出部分，常用于轮播图或防止子元素撑破父容器
- overflow: auto; 在需要时显示滚动条，适合高度受限的内容区
- 对全局 body 或 html 设置 overflow-x: hidden; 可临时阻止横向滚动，但应优先修复根本原因
注意：不要滥用 hidden 掩盖布局问题，应先检查是否有宽度过大的元素或负margin导致溢出。
3. 结合 viewport 设置适配移动端
在HTML头部添加 viewport 元标签，确保页面在移动设备上正确缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这样百分比宽度和响应式设计才能在手机上生效。
4. 调试溢出问题的实用技巧
快速定位哪些元素导致横向滚动：
- 在浏览器中按 F12 打开开发者工具
- 给 body 添加临时样式：outline: 2px solid red; 查看是否超出视口
- 逐个检查使用了 position: absolute、float 或固定宽度的元素
- 使用 flex 布局替代浮动，更易控制空间分配
