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

Question

这就是问题.我有一个div,其中包含几段文字,然后是一个浮动的图像.图像按原样浮动,但包含的div不会垂直扩展以适应图像.我知道我可以手动设置div的高度,但这会产生问题,因为我想对我的网站的每个页面使用相同的div,因此高度需要不同.

这是一个代码示例:

#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;
}

<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>

  <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!


</div>

Answer 1

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

#main_contentbox { overflow: hidden; }

Answer 2

虽然@ cletus的解决方案在技术上是正确的,但将溢出设置为除(默认值)以外的任何值(显式使用默认值)或使用父值将导致元素创建新的块格式化上下文.块格式化上下文是浮动元素可以与块交互的区域.这种情况(浮动元素在非溢出:可见元素内)被明确列为创建新上下文的必要原因:overflow: visibleinitialinheritvisible

"如果一个浮动与滚动元素相交,它会强行重新包装内容.每次滚动步骤后都会发生重绕,导致滚动速度慢." - mdn

因此,将为这个新环境中的直接儿童重新计算高度,并且将包括他们的高度.

我喜欢用它overflow: auto来实现这个,但是scroll,overlay或者,或者hidden都会产生所需的结果,包括浮动计算父元素的高度.