floated div重叠非浮动div

Question

这两个div在body标签中定义 问题是它们彼此重叠div（颜色为黄色）按预期进入页面的左侧，但浮动未设置样式的第二个div（红色）位于第一个div下方

为什么第二个div（红色）不会出现在第一个div旁边，第二个div应该包围第一个div因为float属性

然而，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也应该有一个浮动属性。

请阅读此内容以使其更清晰 - https://css-tricks.com/all-about-floats/

Answer 2

如果您的目标是让它们都向左浮动但不重叠，请将float:left添加到红色div。

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