Css 水平对齐具有不同尺寸的div

我有一个不同字体大小的标签云

<div>
    <a style="font-size:15px;">tag1</a>
    <a style="font-size:10px;">tag1</a>
</div>

现在我需要将每个标记包装到它自己的div中：

    <style>
        .cloud {float:left}
        .tag {float:left}
    </style>
    <div class="cloud">
        <div class="tag"><a style="font-size:15px;">tag1</a></div>
        <div class="tag"><a style="font-size:10px;">tag1</a></div>
    </div>


.cloud{float:left}
.tag{float:left}

更新：如果我为
.tag设置固定高度
，下面是它的外观：
也许可以增加较小字体的行高或垂直填充。发生这种情况的原因是，按照规范中的设计，较小的元件缠绕在较大的元件周围，因此，通过增加较小元件的面积大小，应防止缠绕

顺便问一下，是否有必要首先浮动标签？在您的第一个示例中，仅将它们按正常方式排成一行似乎具有相同的效果。
替换

.tag {float:left}

借

或者你浮动所有标记的原因是什么？
如果我删除浮动，每行将有一个标记。哦，好的，当然-我错了。在这种情况下，尝试将.tag div设置为一个固定高度，这将使所有内容都相等。看起来好多了，但还需要一些东西。嗯，是的，有点尴尬。将每个href包装在div中是否有特定的原因？采用不同的方法可能更容易。如果确实需要，只需使用“a”元素作为容器即可。不要浮动，不要使用块元素（div等）。根据需要使用垂直对齐n（）。
.tag {display: inline}