为什么Content div高度为0？如何实现高度随内部内容自动适配

问题原因 #

这是典型的浮动高度塌陷问题：CSS中float属性会让元素脱离常规文档流，父元素默认计算自身高度时，不会统计脱离文档流的浮动子元素的高度。你的#Content容器的两个子元素都设置了浮动，因此父容器高度无法被子元素撑开，仅靠内边距撑出极小高度，甚至表现为0高度。

解决方法 #

方案1：触发父元素BFC（最简单） #

给#Content添加overflow: hidden或overflow: auto，触发BFC（块级格式化上下文），BFC规则会要求容器包裹内部所有浮动元素，自动适配高度：

#Content {
  background-color: grey;
  padding: 10px;
  position: relative;
  top: 136px;
  overflow: hidden; /* 新增该行 */
}

方案2：伪元素清除浮动（最常用，无冗余标签） #

给#Content添加如下伪元素规则，不需要改动HTML结构即可实现清浮动：

#Content::after {
  content: "";
  display: block;
  clear: both;
}

方案3：末尾添加空标签清浮动（兼容性最好） #

在#Content的两个浮动子元素末尾，添加一个设置了clear: both的空块级标签：

<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 style="clear: both;"></div> <!-- 新增该行 -->
</div>

方案4：改用Flex布局（现代前端推荐） #

彻底放弃浮动布局，用Flex实现两列布局，天生支持高度自适应，适配性更强：

#Content {
  background-color: grey;
  padding: 10px;
  position: relative;
  top: 136px;
  display: flex; /* 新增该行 */
  justify-content: space-between; /* 新增该行，控制两列间距 */
}

#Main {
  border-right: solid 2px;
  padding-right: 2%;
  width: 55%;
  /* 删除原有float: left规则 */
}

#Sidebar {
  width: 35%;
  /* 删除原有float: right规则 */
}

内容的提问来源于stack exchange，提问作者Falling10fruit