HTML/CSS开发遇文本溢出至其他区块问题，寻求解决方案

问题根源 #

你遇到的文本溢出问题由两处CSS配置错误直接导致：

• 奇数序号的section被固定设置了height: 10px，但你给h1设置的字号为5rem，换算后约为80px，远大于容器高度，且未配置溢出处理规则，内容自然会溢出到相邻区块
• 所有section统一设置了padding: 50px，仅内边距的垂直尺寸就已经远超奇数section的10px高度，进一步加剧了溢出问题

解决方案 #

根据你的实际需求选择对应调整方案即可：

1. 若不需要固定奇数section的高度，直接删除section:nth-child(odd)选择器下的height: 10px规则，让容器高度由内容自动撑开
2. 若确实需要固定奇数section的高度，可给section添加溢出处理规则：添加overflow: hidden隐藏溢出内容，或overflow: auto给容器加滚动条
3. 若奇数section是用来做分割间隔的场景，就不要往里面放h1这类大号内容，同时把内边距调整到适配高度的数值

修改后的CSS参考示例 #

/* 区块 */
section {
    width: 100%;
    padding: 50px;
    border-bottom: 1px solid #ccc;
    /* 统一加溢出处理可避免所有内容溢出问题 */
    /* overflow: hidden; */
}

section:nth-child(even) {
    background: #C4C4C4;
    text-align: center;
    height: 500px;
}

section:nth-child(odd) {
    background: #fff;
    text-align: left;
    /* 移除不合理的固定高度 */
    /* height: 10px; */
}

.sections section:first-child {
    margin-top: 60px;
}

额外优化提示 #

你设置的h1字号为5rem，在小屏设备上也容易出现横向溢出，可以替换为响应式字号：

h1 {
    /* 最小2rem，最大5rem，自动适配屏幕宽度 */
    font-size: clamp(2rem, 5vw, 5rem);
    color: #34495E;
    position: relative;
}

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