如何修复响应式Div中响应式图片溢出容器的布局问题？

你的问题源于浮动元素脱离正常文档流：容器.about的高度仅由内部文字内容决定，当大尺寸窗口下文字宽度变宽、高度缩短，不足以撑起图片高度时，图片就会溢出容器。以下是几种可行的修复方案：

方案1：使用Clearfix清除浮动 #

给.about容器添加清除浮动的伪元素样式，无需修改HTML结构，就能让容器正确包裹浮动元素：

.about::after {
  content: "";
  display: table;
  clear: both;
}

保留原有.about和.about-image的样式，添加上述代码后，容器会自动适配内部浮动图片的高度，避免溢出。

方案2：触发BFC（块级格式化上下文） #

给.about容器添加overflow: hidden属性，触发BFC后容器会包含内部所有浮动元素：

.about {
  background-color: #ffffff;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  width: 80%;
  overflow: hidden; /* 新增该行 */
}

这个方法简单直接，但需注意：如果容器内有超出范围的绝对定位元素，会被裁剪。

方案3：改用Flexbox布局（推荐） #

放弃浮动，使用现代Flexbox布局，既解决溢出问题，又提升响应式维护性：

修改后的HTML： #

<div class="about">
  <h2>About</h2>
  <div class="about-content">
    <img class="about-image" src="example-image.jpg">
    <p>Lorem Ipsum...</p>
  </div>
</div>

对应的CSS： #

.about {
  background-color: #ffffff;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  width: 80%;
}

.about-content {
  display: flex;
  gap: 20px; /* 替代原margin-left，控制图片与文字间距 */
}

.about-image {
  width: 50%;
  flex-shrink: 0; /* 防止图片被压缩 */
}

/* 小屏幕下切换为垂直布局 */
@media (max-width: 768px) {
  .about-content {
    flex-direction: column;
  }
  .about-image {
    width: 100%;
    margin-bottom: 10px;
  }
}

Flexbox布局能更灵活地控制元素排列，响应式适配逻辑也更直观。

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