调整浏览器窗口大小时网页正文与图片发生重叠问题如何解决？

问题原因 #

• 核心是布局用了大量固定尺寸+不合理的浮动处理，没有做响应式适配：

1. 段落#abtme-par设置了固定宽度830px，图片#abbypic设置了固定宽度440px，同时图片还有较大的左右margin，当浏览器窗口宽度小于两者加边距的总宽度时，右浮动的图片会和段落挤在一起发生重叠。
2. 父容器.about-me用了固定的padding-bottom: 500px强行撑高度，没有根据内容自适应高度，浮动元素高度变化时就会溢出容器和其他内容重叠。
3. 使用float浮动布局后没有做清除浮动处理，浮动元素脱离正常文档流，父容器无法正确计算高度，进一步加剧了布局错乱。
4. 代码里的负padding属于无效写法（CSS不支持负padding），可以直接删除。

修复方案 #

步骤1：把固定宽度改成响应式宽度 #

给段落和图片都用max-width代替固定width，同时加100%宽度适配小屏幕：

#abtme-par {
  margin-top: 40px;
  border: 2px solid;
  /* 替换原来的固定width:830px */
  max-width: 830px;
  width: 100%;
  text-align: left;
  box-sizing: border-box; /* 防止边框撑宽盒子 */
}

#abbypic {
  /* 替换原来的固定width:440px */
  max-width: 440px;
  width: 100%;
  height: auto; /* 防止图片变形 */
  float: right;
  border: 2px solid;
  margin-left: 20px; /* 调小左边距降低挤压概率 */
  margin-right: 35px;
  margin-bottom: 20px; /* 加下边距避免和下方文字贴合 */
  box-sizing: border-box;
}

步骤2：删除固定内边距，清除浮动 #

修改父容器样式让高度自适应：

.about-me {
  margin-top: 20px;
  border-top: 2px solid;
  border-bottom: 2px solid;
  padding-left: 20px;
  padding-right: 20px; /* 加右内边距防止小屏幕下内容贴边 */
  width: 100%;
  box-sizing: border-box;
  background-color: #E9E5F5;
  font-family: 'Trebuchet MS', sans-serif;
  /* 删除固定的padding-bottom:500px */
  padding-top: 20px;
  padding-bottom: 20px; /* 仅保留合适的内边距即可 */
  box-shadow: 10px 5px 20px rgb(0 0 0 / 50%);
  overflow: hidden; /* 清除浮动，让父容器自适应内容高度 */
}

/* 删除无效的负padding */
.abtme {
  /* 原padding-top: -10px无效删除，需要调整距离可以用margin */
}

步骤3：增加小屏幕适配（推荐） #

当屏幕宽度不足时取消浮动，让图片居中显示在段落上方，完全避免重叠：

@media (max-width: 1024px) {
  #abbypic {
    float: none;
    display: block;
    margin: 0 auto 20px auto;
  }
  #abtme-par {
    margin: 0 auto;
  }
  #aboutme-title {
    margin: 0 auto 20px auto;
  }
}

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