图文元素间距设置：解决文本绕排到图片下方及区块间距不均问题

问题原因 #

你遇到的文字绕排、区块间距不均的问题，根源是alignleft类默认设置了float: left，浮动元素脱离正常文档流会导致父容器高度塌陷，既会让下方文字向上补位产生绕排，也会因为父容器高度计算异常导致区块之间的间距不统一。你之前只给p标签设置样式无法解决问题，是因为没有作用于整个图文区块的外层容器。

解决方案 #

步骤1：调整HTML结构

给每个独立的图文区块套上统一的外层容器，示例如下：

<!-- 单个图文区块结构，多个区块直接复用该结构即可 -->
<div class="content-block">
  <a href="图片链接">
    <img class="alignleft wp-image-45473 size-medium" src="图片地址" alt="头像" width="200" height="200" />
  </a>
  <h3>姓名</h3>
  <p>文字内容...</p>
</div>

步骤2：添加对应CSS样式

/* 图文区块外层容器样式 */
.content-block {
  overflow: hidden; /* 触发BFC，让内部浮动元素参与容器高度计算，避免文字绕排 */
  clear: both; /* 确保当前区块不会和上一个区块的浮动元素重叠 */
  margin-bottom: 24px; /* 统一设置区块之间的间距，可根据需求调整数值 */
}

/* 可选：调整图片和文字的间距 */
.content-block .alignleft {
  margin: 0 18px 8px 0;
}

如果想要更现代、无副作用的实现，也可以用display: flow-root替代overflow: hidden，效果完全一致，不会隐藏容器内溢出的内容：

.content-block {
  display: flow-root;
  clear: both;
  margin-bottom: 24px;
}

可选Flex布局方案

不想用浮动的话可以直接用Flex布局实现，逻辑更直观：

.content-block {
  display: flex;
  align-items: flex-start; /* 图片和文字顶部对齐 */
  gap: 18px; /* 图片和文字的间距 */
  margin-bottom: 24px;
}
/* 文字区域占满剩余宽度 */
.content-block .text-wrap {
  flex: 1;
}

对应HTML只需把文字部分套上text-wrap容器即可：

<div class="content-block">
  <a href="图片链接"><img src="图片地址" alt="头像" width="200" height="200"></a>
  <div class="text-wrap">
    <h3>姓名</h3>
    <p>文字内容...</p>
  </div>
</div>

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