html - 如何使div高度增加以包含 float 图像

Question

这就是问题所在。我有一个 div，其中包含几段文字，然后是一个向右浮动的图像。图像按应有的方式 float ，但包含的 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 属性来更改父 block 处理 float 内容的方式。应该这样做:

#main_contentbox { overflow: hidden; }