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

Question

我有一个块元素向左浮动，其右侧有各种块元素。这些非浮动元素在它们背后显示浮动元素。我想阻止这种情况发生。通常情况下，我会在元素上留下一个空白，但我希望浮动元素下方的元素使用容器的整个宽度（否则它将看起来像两列，下面有白色空格浮动元素）。

我不能手哪些元素将是浮动元素下面，因为它可能具有不同的高度（或根本不存在），这取决于在页面上之前确定。

感谢您的阅读！

Answer 1

一种选择是申请overflow:hidden到每一个正常的元素：

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

IE6可能有麻烦... 7也是......我不记得了r究竟是谁以什么方式吮吸。但也给这些元素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>