在浮動屬性元素後面的內容會發生什麼

Question

剛剛在計算器上看到question。

考慮下面標記：

<div id="box_wrap"> 
    <div id="box1"> 
     <h2>Box1 text</h2> 
     <p>Lorem Ipsum</p> 
    </div> 
    <div id="box2"> 
     <h2>Box2 text</h2> 
     <p>Lorem Ipsum</p> 
     <p>Text</p> 
    </div> 
</div 

與CSS：

#box1 { 
    background-color: blue; 
    width: 30%; 
    float: left; 
} 

#box2 { 
    background-color: red; 
    width: 30%; 
} 

的div出現一個在另一個之上，即（corresponding fiddle）

但是當我給#box2，寬度比的#box1即width:34%更高，則發生這種情況：（corresponding fiddle）

和用於#box2更高寬度（相對於的#box1）即width:50% ，最後會出現所需的效果。 （corresponding fiddle）

通知藍框即與float:left即#box1箱具有width:30%和紅盒即盒沒有float屬性即#box2有width:50%，還是藍得到了比紅色渲染大。

此外，沒有寬度或width:auto#box2它會產生所需的效果。

預期的效果：#div2應該得到對齊的#div1

權任何人都可以，請給我解釋一下，發生了什麼？我錯過了什麼？

（也不知道如何提出這個問題，用適當的標題）之後的浮動元素獲得其內容的浮動元素纏

Answer 1

的元素。 在第一種情況下，當兩個div的寬度相同時，第二個div不能環繞第一個div，因爲一個事物必須更寬（更大），然後才能包圍它自身。

在第二種情況下，box2的寬度比box1的寬，並儘可能將其內容包裹在box1的周圍。

在第三種情況下，當box2的寬度足夠大於box1時，仍然在box1周圍，但box1下面沒有足夠的內容顯示。將更多的內容添加到box2將使其清楚http://jsfiddle.net/GbDqT/4/。這jsfiddle包含width: auto box2和一些額外的內容。

更新：爲什麼BOX2 出現小於BOX1寬是（你能想象），該BOX1是上BOX2的頂部覆蓋的原因。因此，BOX2的大部分是根據BOX1隱藏，但BOX2的內容往右推，因爲浮動BOX1源的

：developer.mozilla