CSS中的div问题

Question

我有一个div的负载，他们要么对齐，清除左侧或右侧。但我有一些奇怪的行为在这里：

http://i54.tinypic.com/2hxm3wk.jpg

基本上，在上半部分，两个div在其顶部和底部的满足，但飘来不同的方向，所以就好像左上方的灰色框将永远不会并排或在右上方的灰色框上方，仅在其正下方。

同样的情况，但在底部颠倒。

任何帮助？

Answer 1

是否可能是每条线两个浮动元素的宽度总和大于其容器的宽度（，您需要考虑宽度+填充+边距+边框的因子..）？

此示例适用http://jsfiddle.net/gaby/mLa7K/

<div id="container"> 
    <div class="box left short">top left</div> 
    <div class="box right short">top right</div> 
    <br class="clear" /> 
    <div class="box left long">bottom left</div> 
    <div class="box right long">bottom right</div> 
</div> 

与

#container{ 
    width:400px; 
    border:1px solid red; 
    overflow:auto; 
} 
.left{ 
    float:left; 
} 
.right{ 
    float:right; 
} 
.box{ 
    width:140px; 
    border:1px solid green; 
} 
.clear{ 
    clear:both; 
    margin:30px 0; 
} 
.short{height:30px} 
.long{height:130px;}