如何調整塊元素的邊界框以適應浮動元素旁邊？

例如，我想讓h1元素調整大小以適應浮動的紅色div。文本已經調整到浮點數，但背景落在浮動元素的後面。如何調整塊元素的邊界框以適應浮動元素旁邊？

我知道我可以爲h1添加右邊距，但紅色區塊的寬度可以變化，我不能有可變邊距。

CSS：

#redblock {    
    background: red; 
    float: right; 
    margin: 10px; 
    width: 100px; 
    height:100px; 
} 
#wrapper { 
    border: 1px solid black; 
    margin: 10px; 
    padding: 10px; 
    width: 300px; 
} 
p { 
    background-color: #ffd; 
} 
h1 { 
    background-color: #667788; 
    font-size: 1.1em; 
    margin: 10px 0; 
}

HTML：

<div id="wrapper"> 
    <div id="redblock"></div> 

    <h1>Test tEst teSt tesT</h1> 

    <p>Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt 
    tesT Test tEst teSt tesT Test tEst teSt tesT</p> 
</div>

見http://jsbin.com/ucili4

來源

2011-01-15 bluegray

我想我找到了解決辦法。將'overflow：hidden'添加到'h1'具有理想的效果。在FF中測試。請參閱http://jsbin.com/ucili4/2 – bluegray