CSS Float：爲什麼浮動應用到要浮動元素之前的元素？

有一些關於CSS「浮動」屬性一直困惑着我。爲什麼在要浮動的元素之前將「float」屬性應用於元素？CSS Float：爲什麼浮動應用到要浮動元素之前的元素？

以幫助觀察我的問題我創建了下面的jsfiddle http://jsfiddle.net/Ubutb/12/

在這個例子中的浮動屬性應用於導航<div>而不是內容<div>。我會認爲浮動需要應用「內容」<div>元素，因爲這些是您想要浮動的頁面正常流程的項目。我明顯錯過了一些東西。有人可以解釋它比我理解的更好嗎？謝謝。

來源

2012-06-01 webworm

"float:left;"意味着股利正在推動針對父<div>的‘左牆’..而當未來"float:left;"格在同一容器中添加，它會被推向左側，並打出了「右牆「第一個div ......就像一個謎題。

容器的寬度決定了第二個"float:left;" div是否有足夠的空間放置在第一個旁邊，或者是否在下面。

如果每個div的寬度都是33％，並且沒有邊距，那麼最常有3個div在一個容器中左邊浮動，並且它們最終會放在一個很好的線上。但是，如果寬度爲34％，其中一個將在底部..

這是對浮動div的最簡單的解釋..當然，當它是正確的浮動時也是如此。

來源

2012-06-01 14:45:31 MNilson

很好的解釋......謝謝！ – webworm

沒問題！ – MNilson

當使用float: {position} CSS時，您告訴該元素「浮動在其父元素的{位置}側」。內容的行爲是正常的，就好像導航div甚至沒有，因爲這是你指示的導航，以擺脫其他元素的方式。

來源

2012-06-01 14:35:40 Death

因此，導航DIV會尊重「標題」DIV，並且只能像DIV允許的「標題」一樣，在它自己的容器DIV中向上浮動？ – webworm

它一直讓我困惑，爲什麼當他們沒有應用任何'float'屬性時，爲什麼「content」DIV浮動到「導航」DIV的左側？但是，如果我的理解正確，那麼它們會與「導航」DIV的右側對齊，因爲它正在運行，並且他們想要位於「標題」DIV下方，這是正常流程。這有意義嗎？ – webworm

雖然這是事實 - 內容div不浮動 - 導航div在其他元素前面浮動。把你的元素想象成一個盒子中的一堆物體。當你做一個「浮動」（通過將它拉出堆棧並朝向你），其他人下降以填補它的位置（在這種情況下，因爲HTML是自上而下的）。那些其他的盒子不是漂浮的，它們只是填滿了空間 - 這是你拖出來的漂浮物。 – Death

這是你想要的嗎？就像你正在尋找一個jsfiddle

浮動的位置是相對於「容器」又名「父」（在這種情況下，在沒有容器，後者是全身）

來源

2012-06-01 14:36:27 DonCallisto

另外，根據你的內容佈局方式，你可以使用像這樣[jsfiddle]（http://jsfiddle.net/Ubutb/21/）。它使用float：right –

這不是我不知道如何完成佈局，而是我試圖理解爲什麼它以這種方式工作。謝謝你的例子，但！ – webworm

這聽起來很好的解釋爲什麼花車會像他們那樣工作？這裏有一些很好的寫起坐：

All About Floats從CSS-技巧
CSS Float Theory從粉碎編碼
How to explain CSS Float in general language?從StackOverflow的

我自己的解釋：浮動元素的確是一個浮動。它旁邊的元素正在做所謂的「包裝」。

來源

2012-06-01 14:42:38 tybro0103

偉大的鏈接。謝謝！ – webworm

CSS Float：爲什麼浮動應用到要浮動元素之前的元素？

回答

相關問題