防止塊元素的背景在浮動內容後面流動

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>