html - CSS 中的 Div 问题

Question

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

基本上，在上半部分，两个 div 在它们的顶部和底部相遇，但 float 方向不同，所以就好像左上灰色框永远不会并排或在右上灰色框上方，只有就在它下面。

同样的情况，但在底部相反。

有什么帮助吗？

Answer 1

会不会是每行两个 float 元素的组合宽度大于它们容器的宽度(您需要考虑宽度 + 填充 + 边距 + 边框..)？

这个例子有效 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;}