防止块元素的背景在浮动内容后面流动

Question

我有一个块元素浮动到左边，右边有各种块元素。这些非浮动元素具有背景，它们显示在浮动元素的后面。我想防止这种情况发生。通常情况下，我会在元素上留下一个边距，但我希望浮动元素下面的元素使用容器的整个宽度（否则它看起来就像两列，下方有空白区域漂浮的元素）。

我无法事先确定哪些元素将位于浮动元素下方，因为它可能是不同的高度（或根本不存在），具体取决于页面。

感谢阅读！

Answer 1

一种选择是将overflow:hidden应用于每个常规元素：

http://jsfiddle.net/sdleihssirhc/y2kG8/

IE6可能也有问题... 7也是......我不记得究竟是谁以什么方式糟透了。但是也要给这些元素zoom:1解决它。

Answer 2

您是否尝试在浮动元素上使用display:inline-block？即 - http://jsfiddle.net/jordanlewis/krbpR/

Answer 3

这是我能得到的尽可能接近。我想你所要求的可能是不可能的。

<强> Live Demo

<style type="text/css">
#wrap {
    background-color: #EEE;
    overflow: auto;
}
.floated {
    border: 1px solid #F00;
    float: left;
    padding: 5px;
    height: 60px;
    width: 20%;
}
.element {
    background-color: #DDD;
    border: 1px dashed #000;
    display: inline-block;
    float: left;
    margin: 5px 0;
    padding: 2px;
    width: 75%;
}
</style>

<div id="wrap">
    <div class="floated">floated element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
</div>