0 
<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:leftin .floatright，每个图像的左侧都不允许有浮动元素，因此，所有图像都会堆叠在一起，但实际上不是，clear:left什么都不做，为什么？

4

2 回答 2

2

它按照它所说的去做，该clear属性只考虑前面元素的位置，而不是后面的元素。

此属性指示元素框的哪些边不能与早期的浮动框相邻（W3C CSS 规范）

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

于 2013-07-23T06:50:59.753 回答
1

如果您想要一个体面的解释，请查看MDN（或规范本身）。W3Schools 是一个糟糕的参考。

clear: left不会仅仅因为clear: left只清除向左浮动的元素而工作。如果要清除两个方向，请使用clear: both.

于 2013-07-23T06:48:59.687 回答