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;}