CSS：浮動DIV影響的非浮動的div

我剛剛finsished谷歌的CSS演練內容：http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/CSS：浮動DIV影響的非浮動的div

與示例文件後試驗（文件：CSS-walkthrough.html），我發現了一些奇怪的行爲，我無法解釋。

我有一個div容器3周的div：

我們有follwing CSS，這使得預期：所有3周的div採取「跳出流程」，並在一行中顯示。內容跨度在divs內。

#wd-c div { 
    height: 150px; 
    border: 1px solid #222; 
    font-size: 150%; 
    font-weight: bold; 
    opacity: .7; 
} 

#wd-c div { width: 150px; } 
#wd-C#wd-1 { width: 50px; } /*for clarity*/  

#wd-1 { float: left } 
#wd-2 { float: left } 
#wd-3 { float: left }

然而，當我去掉：

/*#wd-3 { float: left }*/

DIV＃WD-1和＃WD-2仍呈現 '出來的流的'，＃WD-3被呈現爲塊元件，重疊其他2.

奇怪的是，內容與字符3跨越，出現在所有div下面，不再是＃wd-3裏面。

它看起來好像＃wd-3的內容受浮動div影響，這顯然是錯誤的。舉例來說，當我改變的＃寬度WD-3

#wd-C#wd-3 { width: 220px; }

字符呈現DIV中，只是重疊浮動DIV＃WD-2 ..你有什麼解釋的旁邊？

來源

2012-03-20 Fabian

也許還有另一個明確的：兩個問題。如果您需要浮動，則清除容器或添加清除分區。理想情況下，找到一種不同於浮動的方式。 – 2012-03-20 14:28:28

這很合乎邏輯。 float不會像position:absolute那樣將文檔流中的相應元素取出。

通常，元素「尊重」附近的浮動元素，並嘗試相應地顯示其內容。現在通過刪除第三個div上的float，它將被拖動到浮動的div下面。但是，它試圖在不干擾浮動的div內容的情況下將其內容呈現在下一個可能的位置。

既然你聲明瞭固定的寬度和高度，第三個div沒有地方顯示它的內容而沒有與浮動div「碰撞」。這就是爲什麼內部span -Element被推到浮動div下面，在這裏div元素的下一個空閒空間將會被放置。

我希望這解釋了一些機制。嘗試試驗高度和寬度。（評論他們），看看不同之處。

來源

2012-03-20 14:54:09 Christoph

克里斯托弗說得對。以下是人們進行實驗的原始標記和樣式示例：http://jsfiddle.net/qeYPj/。請注意，如果您註釋掉第三個，您會看到OP提到的問題。這在很大程度上是在div上設置* height *的函數。刪除CSS中的高度線，你會得到不重疊的容器;然而，跨度仍然被推到最右邊的浮動div下面。添加高度，但也添加「溢出：隱藏」，看看它是如何影響浮動的感知行爲的*內容*。 ;-) – 2012-03-20 15:00:30

我不明白。第三段內容有足夠的空間放置在浮動元素的右側;爲什麼還會被推倒？我的意思是，任何地方都沒有「明確的」。而且這不像第三個div被推下去。 – 2012-03-20 15:09:26

@MrLister也許這個小提琴會讓你更清晰：http://jsfiddle.net/poikl/Y4tTQ/1/浮動是一件很難的css事情，它需要一些時間來完成它，只是玩小提琴並問如果您有任何進一步的問題。 – Christoph 2012-03-20 15:36:18

嘗試再次下載該示例，在我的電腦上3確實留在#wd-3 div當我浮動它。

或者，如果您希望#wd-3 div保持對父塊元素的限制，請在#wd-c div上使用overflow:hidden。

來源

2012-03-20 14:42:06

CSS：浮動DIV影響的非浮動的div

回答

相關問題