問題有明確的：權當使用浮動：權

<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不做任何事情，爲什麼？

來源

2013-07-23 user2294256

試過'clear：both;'？ –

感嘆。 w3schools再次錯誤*。 – Alohci

它做什麼它說，該clear財產只考慮較早元素的位置，而不是以下元素。

此屬性表示元素的盒子（ES）的側面可以不相鄰的較早浮箱(W3C CSS specification)

當您設置float: right所有三個圖像，第二圖像將是將第一張圖片的左側放入。 clear:left將考慮之前的元素，這裏是第一個圖像，而不是下一個元素。所以沒有理由爲什麼第三張圖片必須放在第二張圖片下面。

來源

2013-07-23 06:50:59

看看MDN（或在spec本身），如果你想要一個體面的解釋。 W3Schools是一個可怕的參考。

clear: left將不起作用，因爲clear: left只會清除浮動到左側的元素。如果您想清除兩個方向，請使用clear: both。

來源

2013-07-23 06:48:59 Blender

問題有明確的：權當使用浮動：權

回答

相關問題