这里是演示http://jsfiddle.net/aTBWh/
容器为id(div)，表示它从浏览器继承了display:block值，该容器内的两个div是类。它们都具有200px和300px，而主容器具有600px宽度，所以我认为当我将一个类浮动到右侧时，它应该只从整个容器中消耗300px，这意味着两个div应该装在容器内，一个没有出现在另一个之上。没有clear:both属性。
如果容器是一个id为600px的id，则该类嵌套在其中（特别是当一个对象向右浮动时，它们应该填充该容器。）
简而言之当绿色的div类可以清楚地容纳在容器中时，为什么它离开了容器，并且它浮在右边？我不明白这个问题。
代码：css
#content_canvas_container{
background:#CCC;
min-height:200px;
border:1px solid red;
width:600px;
}
.red{
width:200px;
background:red;
height:140px;
}
.green{
width:300px;
background:green;
height:140px;
float:right;
}
/*PROPERTIES*/
.w90{width:98%}
.m_auto{margin:auto; border:1px solid black}
html
<section id='content_canvas_container'>
<div class='w90 m_auto'>
<div class='red'> red </div>
<div class='green'> green </div>
</div>
</section>
您所看到的是预期的行为。
发生这种情况的原因是，默认情况下红色的div元素是block级别的元素。因此，在其当前状态下，无论其具有定义的宽度还是具有浮动的同级元素，它都将始终出现在新行上。
通过浮动或绝对定位元素，实际上是在从文档流中删除它，从而使display:block无效。因此，您可以通过浮动红色div元素或向其添加display:inline-block来解决此问题。 (example)
.red {
width: 200px;
background: red;
height: 140px;
float: left;
}
之所以发生，是因为当您将float设置为一个框时，它会移动到容器的左侧或右侧（当然，根据其他复杂规则），但是它相对于容器顶部的垂直偏移可以小于不浮动的情况。
浏览器正在根据您要执行的操作做出决定。
您尚未在红色div上指定浮点数，因此它仍在流动中并充当普通的块级元素，即“将我后面的所有内容推到下一行”。
然后您告诉绿色div在其容器中向右浮动，因此它向右移。
使用float:left将允许其他元素环绕它。 （CSS-float）
float CSS属性指定应从常规流程中获取元素，并沿其容器的左侧或右侧放置，其中文本和内联元素将围绕该容器包装]。浮动元素是其中float的计算值不为null的元素。
.red{
float:left;
}
要了解默认情况下为什么其他元素不会环绕div，请阅读块级元素here。
“ Block-level”是HTML元素的分类，与“ inline”元素相反。块级元素只能出现在一个元素内。 它们最显着的特征是，它们通常在元素之前和之后以换行符进行格式化（从而创建独立的内容块）。也就是说，它们占用了容器的宽度。
默认情况下，除非您另外指定，否则div元素是块级的。我引用的链接提供了默认情况下所有块级元素的列表。
发生这种情况是因为DIV是块级元素，这意味着它们以新行开始。在您的示例中，当向右浮动.green时，.red元素仍占据100％的水平空间，而.green现在占据300px，但由于作为块级元素而属于下一行，因此将其下推。为了避免这种现象，必须将block元素转换为inline元素。
因此，在这种情况下，如果您想将.green浮动到右侧，则应将父包装内的DIV元素呈现为内联块而不是独立块，只需添加此规则：
.m_auto div {
display: inline-block;
}
干杯。