如何使 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 的解决方案在技术上是正确的，但将溢出设置为 any 值，而不是overflow: visible（默认值）、initial（显式使用默认值）或带有@987654326 的inherit @parent 将导致元素创建一个新的block formatting context。块格式化上下文是浮动元素可以与块交互的区域。这种情况（非溢出内的浮动元素：可见元素）被明确列为必须创建新上下文的原因：

“如果浮动元素与滚动元素相交，它将强制重新包装内容。重新包装将在每个滚动步骤之后发生，从而导致缓慢的滚动体验。” - mdn

因此，将重新计算此新上下文中任何直系子项的高度，并将包括他们的高度。

我更喜欢在可能的情况下使用overflow: auto 来完成此操作，但scroll、overlay 或hidden 都会产生在计算父元素高度时包含浮动的预期结果.

Answer 3

使用:after 伪类，您可以让命名的 div 自动附加明确的修复。将此添加到您的 css 文件中：

#main_contentbox:after {
  content: "Foo";
  visibility: hidden;
  display: block;
  height: 0px;
  clear: both;
}

有了它，无论您在哪个页面上，您都无需执行任何操作来强制 main_contentbox 增长以包含其浮动。

Answer 4

不妨试试 JavaScript：

window.onload = FixMyDiv();

function FixMyDiv()
{
  var divh = document.getElementById('main_contentbox').style.offsetHeight;
  var imgh = document.getElementById('sample').style.offsetHeight;

  if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50;


}