<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
不会执行任何操作,为什么呢? 最佳答案
它确实做到了,clear
属性仅考虑了早期元素的位置,而不考虑以下元素。
此属性指示元素框的哪些边可能不与较早的浮动框(W3C CSS specification)相邻
当对所有三个图像都设置float: right
时,第二个图像将放置在第一个图像的左侧。 clear:left
将考虑较早的元素,这里是第一个图像,而不是下一个元素。因此,没有理由将第三张图像放置在第二张图像下方。