<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
没有做任何事情,为什么?
最佳答案
如其所说,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 元素。因此,没有理由必须将第三张图片放在第二张图片下方。
关于css - 清除 : right when use float:right 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17803146/