css - 清除 : right when use float:right 的问题

Question

<style>
.floatright { float: right;margin: 0 0 10px 10px;clear: right;width:60px; height:60px; }
</style>
<img class="floatright" src="computer1.png" alt="" width="60" height="60">
<img class="floatright" src="computer2.png" alt="" width="60" height="60">
<img class="floatright" src="computer3.png" alt="" width="60" height="60">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

问题:

这里的clear: right;会把图片叠加在一起，但是为什么不能用clear: left;呢，根据这里:http://www.w3schools.com/cssref/pr_class_clear.asp ，据说:

clear:left,     No floating elements allowed on the left side

所以这意味着如果我在 .floatright 中使用 clear:left，则每个图像的左侧不允许有 float 元素，因此，所有图像将堆叠在彼此顶部，但实际上不是，clear:left 没有做任何事情，为什么？

Answer 1

如其所说，clear 属性仅考虑较早 元素的位置，而不是后续 元素。

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box (W3C CSS specification)

当您将 float: right 设置为所有三个图像时，第二个图像将放在第一个图像的左侧。 clear:left 将考虑 earlier 元素，这里是第一个图像，而不是 next 元素。因此，没有理由必须将第三张图片放在第二张图片下方。