浮动图 - 为什么左右移动去哪儿？

Question

左边的浮动应该非常简单：将图形向左浮动。但是HTML5不是左移，而是随机决定可能向左浮动，也许是浮动（ish），也许两者都没有。什么是数字漂浮他们想要的方式？

我的预期输出是这样的：

我的实际输出是这样的：

（是的，这些例子没有相同数量的图片。这是创建示例时的一个错误。我花了太长时间让他们回去重新开始。这些例子意味着要有相同数量的图像。）

以下是标题中的CSS代码：

    <style>
        figure.cover { float:left; margin: 0; padding-right: 10px; padding-top: 10px; padding-left: 0; width: 50%;}
        figure.cover img {float:left; width:100%;}
        figure.cover figcaption {text-align: center; font-style: italic;}       
        figure.left { float:left; margin: 0; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; width: 45%;}
        figure.left img {float:left; width:100%;}
        figure.left figcaption {text-align: center; font-style: italic;}
        figure.right { float:right; margin: 0; padding-right: 0px; padding-top: 10px;  padding-bottom: 10px; padding-left: 10px; width: 45%;}
        figure.right img {float:right; width:100%;}
        figure.right figcaption {text-align: center; font-style: italic;}           
        figure.center { display:block; margin-left: auto; margin-right: auto; width: 75%;}
        figure.center img { display:block; margin-left: auto; margin-right: auto; width: 100%;}
        figure.center figcaption {text-align: center; font-style: italic;}
    </style>

这是我用来渲染图像的HTML（显然重复了几次）。

<figure class="left">
    <img src="image 2">
    <figcaption>
        Lorem Ipsum
    </figcaption>
</figure>
<figure class="right">
    <img src="image 3">
    <figcaption>
        Lorem Ipsum
    </figcaption>
</figure>

尝试解决方案：

• 调整图像大小并替换不同的文件，以排除导致问题的特定图像，
• 调整数字上方和下方的填充，
• 在右浮动图形之后插入符号，
• 将配对的数字嵌套到一个figure.master元素中，
• 在CSS中添加display：block以获取figure.right和figure.left类的img描述，
• 插入溢出：隐藏相同，

以及其他一些我甚至无法记住的修补补充。

在div中包装右对和左对不是一个选项，因为它需要重建整个站点。

Answer 1

对于它的价值，我想我已经提出了一个相当简单的（太简单，应该早点想到它？）解决方案。每次配对后插入<div style="clear: both;"></div>。