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

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

Answer 1

它完成了它所说的，clear属性只考虑之前的元素位置，而不是跟随元素。

此属性指示元素框的哪些边可能不与早期浮动框(W3C CSS specification)
相邻

当您将float: right设置为所有三个图像时，第二个图像将被放入第一个图像的左侧。 clear:left将考虑之前的元素，此处为第一个图像，而不是 next 元素。因此，没有理由将第三张图像放在第二张图像下面。

Answer 2

如果您想要一个合适的解释，请查看MDN（或spec本身）。 W3Schools是一个可怕的参考。

clear: left无法正常工作，因为clear: left仅清除浮动到左侧的元素。如果您想清除两个方向，请使用clear: both。

问题清楚：当使用浮动时右：右

2 个答案: