Floated divs重疊？

Question

目前，一個div浮動 - 我的問題是爲什麼兩個divs重疊，即使它們中的每一個都設置了尺寸？我怎樣才能解決這個問題？

HTML：

<div class="wrapper"> 
    <div class="block1"> 
    </div> 
    <div class="block2"> 
    </div> 
</div> 

我的CSS：

.wrapper {border:black solid;width:500px;height:1000px} 
.block1 {width:300px;height:300px;float:right;border:solid red;} 
.block2 {width:300px;height:300px;border:solid green;} 

的jsfiddle這裏 -http://jsfiddle.net/FLwUA/1/

Answer 1

這是因爲你給他們使用像素定義的寬度 - 您的包裝寬度是onl y 500px，但是您使用的300px的300px divs等於600px，因此它最終會在容器div之外。你可以像這樣使用與父div相關的百分比。這是一個jsFiddle。

.wrapper {border:black solid; width:500px;height:1000px} 
.block1 {width:49%;height:300px;float:right;border:solid red;} 
.block2 {width:49%;height:300px;border:solid green;} 

另外，如果你想保持固定的寬度，並有一個比其他如果它們太大，你可以只在第二塊上使用float。這裏是jsFiddle。

.wrapper {border:black solid; width:500px;height:1000px} 
.block1 {width:300px;height:300px;float:right;border:solid red;} 
.block2 {width:300px;height:300px;float:left; border:solid green;} 

Answer 2

的兩個div重疊因爲一個是（非浮動的一個）固定在DOM佈局和其他被有效地從DOM結構（浮動的）取出並自由地覆蓋作爲所述兩個不會由於寬度爲兩個小，所以並排放在父容器中。

要解決這個問題，有幾個選項，具體取決於您的修復意思。

您可以在非浮動div上使用CSS'clear'屬性強制它在其一側或兩側都沒有任何東西（在給出的場景中爲'clear：both;'或'clear：left;'） 。

或

您可以設置非浮動的div浮動，這也將拿出來的DOM佈局，以便它現在是在同樣的情況與其他浮動DIV。

---

附加

只是爲了以防信息的所有漂浮物成爲一個問題。實現相同結果而不浮動div的一種方法是使用「display：inline-block;」它們都是CSS屬性，但是你需要在HTML中調換兩個div的順序才能得到相同的佈局。