html - 为什么不清除 :both eliminate this overlap?

Question

我似乎无法获得 clear:both避免多个 float 元素相互碰撞。例如，使用此 HTML:

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.alignright::before,
.alignleft::before {
  clear: both;
  content: ' ';
}

<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>

我试图将任何段落强制执行为最多一个 .alignleft或 .alignright图片漂浮在它旁边，但是 clear:both对于 .alignright::before似乎不足以将第二个数字向下移动到 .alignleft 底部以下图

我试过分配 clear:both类到 .alignleft元素，以及 ::before伪元素。我不确定我还需要尝试什么其他魔法。

因为 HTML 是由默认的 WordPress 编辑器创建的，所以我真的很想避免任何需要更改元素结构的解决方案。我想通过 CSS 样式严格解决这个问题。

Answer 1

这是您要寻找的行为吗？

.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>