如何调整块元素的边界框以适应浮动元素旁边？

例如，我想让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