相同元素的浮動和清除如何工作？

我在早些時候習慣了我的CSS技巧，並且遇到了一個讓我變得禿頂的教程。這裏的鏈接：http://css.maxdesign.com.au/floatutorial/tutorial0304.htm我花了幾個小時研究這個答案，但沒有遇到任何幫助我的東西。相同元素的浮動和清除如何工作？

本教程的作者沒有提供任何有關元素的細節。我知道浮動會將頁面擡離頁面並將其浮動到給定方向（左/右）。清除重置浮動元素並將其放回到頁面流中。

如果右側已被清除，這些元素仍然如何漂浮到右側？我不明白這背後的邏輯。任何關於此的澄清將深深感激，也許我可以保留我的頭髮。

編輯：這裏是CSS代碼，並從上面鏈接教程截圖...

.floatright { 
    float: right; 
    margin: 0 0 10px 10px; 
    clear: right; 
} 

p { margin-top: 0; }

enter image description here

來源

2012-07-26 W3Geek

你誤會結算。 clear: right僅僅意味着元素應該垂直清除所有先前在同一個上下文中右移的元素，換句話說，它應該降到所有其他右移元素之下。可視化：

|       | 
|   +-----++-----+| 
|   | A || B || 
|   |  ||  || 
|   +-----++-----+| 
|     +-----+| 
|     | C || 
|     |  || 
|     +-----+| 
|       |

所有元素浮動權，但C設置爲clear: right，所以它低於先前的浮動元素。

來源

2012-07-26 06:54:11 deceze

所以爲了確保我的理解正確，方框[a]，[b]和[c]將會像[c]，[b]，[a]一樣浮動到右側。如果[a]具有明確的權利：對其適用，則不會因爲右側沒有任何內容可以清除而下降。但是，如果[b]具有該屬性，那麼它將在[c]左邊下降。 – W3Geek 2012-07-26 07:07:41

不確定的解釋是非常明確的，但是，是的：如果所有元素都有'clear：right'應用於它們，它們將全部垂直堆疊。這通常是期望的效果，即將一些圖片正確地浮在文本體中，而不會使它們水平堆疊。 – deceze 2012-07-26 07:10:37

這是我解釋的代碼。 http://jsfiddle.net/ZdAwM/看看你能否理解我現在想說的話。我想我已經掌握了它背後的基本理念。希望更多它會來到我身上。 – W3Geek 2012-07-26 07:20:49

浮動：權利;意味着元素應該向右浮動（在其父容器中向右對齊，並且父元素的非浮動內容在其周圍流動）。如果多個右浮動元素在HTML中相互關聯，那麼它們將全部彼此相鄰放置，直到父容器已滿並且在該點處存在換行符。

clear屬性指定是否允許在元素中出現浮動。這與元素是否浮動無關。清除：右側意味着右側不允許浮動元素。

所以float：在例子中的右邊確保圖像向右浮動，文本在它們周圍流動。清晰：右圖確保圖像放置在彼此之下而不是一行。

來源

2012-07-26 06:53:12 Andreas

浮動元素並清除方向時，基本上（簡單來說）向文檔流添加分頁符。如果已清除的元素後面跟着另一個浮動元素，但方向相同，則它當然會浮動，但會出現在第一個浮動元素的下方。

下面是一個帶有兩組浮動元素的示例，一個帶有清除，另一個帶有清除。

http://jsfiddle.net/Kyle_Sevenoaks/detxc/

希望它可以幫助你了:)

來源

2012-07-26 06:53:17 Kyle

相同元素的浮動和清除如何工作？

回答

相關問題