为什么“内容” div 的高度为零？ [复制]

Question

所以我在“内容”div 中有两个 div（如下图中的白色框所示。）它们都有文本，我希望“内容”div 的高度和宽度与下面的两个 div 加入了，但“内容”div 的宽度是唯一“正常”的东西。

我什至尝试手动设置高度，但这不是我想要的，我想让高度自动与内容的高度相同。

你为什么喜欢这个“内容”div？

被检查的网站：

重新创建错误所需的 HTML 代码和 CSS 规则（除了这里，div 现在是灰色的）：

#Content {
  background-color: grey;
  padding: 10px;
  position: relative;
  top: 136px;
}

#Main {
  border-right: solid 2px;
  padding-right: 2%;
  width: 55%;
  float: left;
}

#Sidebar {
  width: 35%;
  float: right;
}

<div id="Content">
  <div id="Main">
    <h1>Lorem ipsum</h1>

    <p>lorem ipsum dolor sit amet</p>
  </div>

  <div id="Sidebar">
    <h2>Lorem ipsum</h2>
  </div>
</div>

Answer 1

content.div div 的内容设置了一些 CSS 样式，使得 content.div 的高度不能被自己的内容拉长