html – 如何使div高度增加包括浮动图像

这就是问题。我有一个div，其中包含几段文字，然后是浮动的图像。图像应该是正确的，但是包含的div不会垂直扩展以适应图像。我知道我可以手动设置div的高度，但这会变得有问题，因为我想为我网站的每个页面使用相同的div，因此高度将需要不同。

以下是代码示例：

HTML

<div id="main_contentBox">
   <h1 class="page"> The Event </h1>
   <img id="sample" src="sample.jpg"/>
   <p>
   stackoverflow is awesome!stackoverflow is awesome!stackoverflow is         awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p>

stackoverflow是真棒！stackoverflow是真棒！stackoverflow是真棒！stackoverflow是真棒！

CSS

#main_contentBox {width:918px;
              margin:10px auto;
              padding:10px 20px 20px 20px;
              background-color:#ffffff;
              border-style:solid;
              border-width:1px;
              border-color:#000;}

#main_contentBox img#sample {float:right;}

解决方法

您可以通过更改overflow属性来更改父代块如何处理浮动内容的行为。这应该做到：

#main_contentBox { overflow: hidden; }