我的DIV元素髮生了什麼？

-1

HTML：

<body> 
    <div id="red"> ABC </div> 
    <div id="blue"> ABC </div> 
</body>

CSS：

body{ 
    width: 300px; 
} 
#red{ 
    float:left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

#blue{ 
    height: 100px; 
    background-color: blue; 
}

我看到紅色squara和藍色的只是在它旁邊。

但是，如果我添加行「width：100px;」在#blue，一切都毀了：的「ABC」跳躍」一條線下來，沒有藍色的背景爲什麼？

來源

2012-08-09 Yura

因爲其他的div浮動超過它當你浮動的東西時，任何不浮動的元素都會有其外邊界在浮動元素的後面，因此，藍色框實際上是在紅色的後面..但是因爲紅色是塊級別的元素，文本將不適合在那裏，所以它位於紅色下方。浮動並且它將起作用

http://jsfiddle.net/AUZxY/

來源

2012-08-09 15:35:57 Tallboy

謝謝。我不確定我是否理解了這一點：「任何未被浮動的元素都會有其外邊界位於浮動元素的後面」。你能解釋一下嗎？ :) – Yura 2012-08-09 17:57:33

從#blue元素中刪除浮動元素，並給它一個比#red元素寬的寬度將顯示這個，hopefull [this Fiddle]（http://jsfiddle.net/AUZxY/5/）可以幫助你理解Tallboy正在談論。 – Vap0r 2012-08-09 18:27:14

謝謝，幫助 – Yura 2012-08-10 16:45:05

嘗試浮動兩種元素的左邊，我相信this Fiddle，我放在一起應該。你正在尋找什麼

來源

2012-08-09 15:35:52 Vap0r

事實上，兩個都浮在左邊的作品。 – Yura 2012-08-09 15:41:00

但是，原件的問題是什麼？（我想明白什麼是錯誤的，以防止它在未來:)）謝謝！ – Yura 2012-08-09 15:41:35

在這種情況下，看看Tallboy的答案。我回答最快，但你應該給他答案，因爲他也解釋了這個問題。 – Vap0r 2012-08-09 15:42:42

我的DIV元素髮生了什麼？

回答

相關問題