使左右浮动重叠而不是堆叠

Question

这比解释更容易展示：http://jsfiddle.net/gN4VZ/

当两者结合超过容器宽度时，是否有可能让我的右浮动内容（蓝色）重叠我的左浮动内容（红色）而不是堆叠在它下面？

Answer 1

您可以使用absolute positioning。

而不是

float: right

使用：

position: absolute;
right: 0;

而不是

float: left

使用：

position: absolute;
left: 0;

请务必在父position: relative;上设置div，以便绝对定位相对于各自的容器而不是页面。

Answer 2

使用绝对定位，.box类设置为position:relative。

http://jsfiddle.net/gN4VZ/1/

请注意，我必须在每个.box上设置一个高度，以便它不会重叠到顶部/底部。

你的新CSS将是

.bar {
    border:solid 1px black;
    color:white;
    position:relative;
    height:40px;
}
.clear {
    clear:both;
}
.left-bar {
    background:red;
    height:40px;
    position:absolute;
    left:0;
}
.right-bar {
    background:blue;
    position:absolute;
    right:0;
    height:40px;
}​

---

根据My Head Hurts的建议，您可以放置​​正确的一个，这样就不需要外部div的高度。

http://jsfiddle.net/gN4VZ/2/