CSS中的div问题

Question

我有很多 div，它们要么对齐，要么向左或向右清除。但我在这里有一些奇怪的行为：

基本上，在上半部分，两个 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;}