是否可以浮动：对；对齐顶部？

Question

这是我的jsfiddle。

我有一个使用“clearfix”类的容器。其中有 3 篇文章，前两篇以 70% 宽度向左浮动，最后一篇以 30% 宽度向右浮动。

我的期望是浮动的右侧文章将填充空白并与右上角对齐......但它与最后一个浮动的左侧文章对齐。

有没有什么办法可以强制这个浮动的右文章对齐到顶部，而不诉诸定位？

谢谢！

编辑：我应该详细说明，遗憾的是在这种情况下我几乎无法控制标记......我无法将前两篇文章包装在自己的容器中。此外，每篇文章的高度都是不可预测的。如果我绝对定位右对齐的文章，并且它的高度比组合的左对齐文章长......那么我会有一个文章元素溢出到页脚上。

.left {
    float: left;
    width: 70%;
    height: 240px;
}
.right {
    float: right;
    width: 30%;
    height: 340px;
}
.clearfix:before,
.clearfix:after,
.checkboxset:before,
.checkboxset:after {
    content: " ";
    display: table;
}
.clearfix:after,
.checkboxset:after {
    clear: both;
}

Answer 1

float 的问题在于它会从 DOM 中移除浮动元素，因此它不再知道其他元素在哪里来对齐自身。您需要将它包装在一个未浮动的 div 中，然后对齐它。包装元素也需要“溢出：隐藏”，这样它才能包含整个浮动元素。