为什么不清楚:两者都消除了这种重叠?

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

/* enforce that any paragraph as at most one
   .alignleft or .alignright image floating beside it */ 
.alignleft, .alignright {
   clear: both;
}
/* assuming that the paragraps are related to the figure before them,
   enforce that paragraps related to left-floated figure
   aren't beside the right-floated figure, and vice versa */
.alignright + p {
  clear: left;
}
.alignleft + p {
  clear: right;
}

<figure class="wp-caption alignleft">
  <img src="https://placehold.it/92x217&amp;text=92x217" />
  <figcaption>With a caption</figcaption>
</figure>
<p>Paragraph related to the left-aligned image with a caption.</p>
<p>Another paragraph</p>
<p>Below is a right-aligned image with a caption</p>
<figure class="wp-caption alignright">
  <img src="https://placehold.it/92x217&amp;text=92x217" />
  <figcaption class="wp-caption-text">With a caption</figcaption>
</figure>
<p>Paragraph related to the right-aligned image with a caption.</p>
<p>Another paragraph</p>