CSS实现图片与文本并排时窗口最大化图片下移溢出区块求助

问题原因 #

你当前使用float: right实现图文并排，浮动元素会脱离正常文档流，当窗口宽度足够大时，介绍文本的高度小于头像图片高度，父容器.block没有触发BFC（块级格式化上下文），就会出现高度塌陷，最终导致图片溢出到下方的视差区块。

解决方案 #

推荐使用兼容性更好、更可控的Flex布局实现需求，无需依赖浮动即可避免高度塌陷问题：

1. 调整HTML结构，将图文内容包裹在独立容器中：

<div class="block block-light">
  <h3>动漫之父</h3>
  <div class="intro-wrapper">
    <p>手冢治虫（1928年11月3日－1989年2月9日）被称为漫画与动漫教父，是日本知名漫画家、动画师、卡通作者。1968年，他创立了手冢制作公司和虫制作公司。</p>
    <img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg" alt="手冢治虫头像">
  </div>
</div>

2. 新增对应CSS规则，删除原有.img1中的float: right属性：

.intro-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 5%;
  margin-top: 2rem;
}
.img1 {
  width: 25%;
  max-width: 280px; /* 可自定义，避免窗口过大时图片尺寸过高 */
  border-radius: 50%;
  flex-shrink: 0; /* 防止窗口缩小时图片被挤压变形 */
}
.intro-wrapper p {
  flex: 1;
  margin: 0;
}

如果你不想改动原有HTML结构，也可以通过清除浮动修复问题，给.block新增清除浮动规则即可：

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

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