浮動div重疊非浮動div

Question

這兩個div是在body標簽中定義的。問題是它們彼此重疊，div（黃色）按預期方式移至頁面的左側，但是未設置浮點樣式的第二個div（紅色）位於第一個div的下面

為什么第二個div（紅色）不在第一個div旁邊，由於float屬性，第二個div應該環繞第一個div

但是Visual Studio 2010產生了預期的結果，但是chrome，firefox，jsfiddle卻沒有

<div style ="background-color:Yellow;height:300px; width:300px; float:left"> </div>
<div style ="background-color:red;height:300px; width:300px"> </div>

Answer 1

float屬性適用於您將其應用到的元素以及相對於它的元素。 如果元素不具有float屬性，則不會嘗試向左/向右浮動。 第二個div也應該具有float屬性。

請閱讀以使其更清楚-https://css-tricks.com/all-about-floats/

Answer 2

如果您的目標是使它們都向左浮動但不重疊，則將float:left添加到紅色div中。

http://jsfiddle.net/42o54e4w/1/