父元素高度塌陷的解决方法有三种：一是clearfix伪元素法，通过::after清除浮动；二是display: flow-root创建BFC自动包含浮动；三是用block包裹层，但会增加冗余DOM。

父元素高度塌陷是因为浮动元素脱离了文档流，导致父容器无法感知子元素的高度。解决的核心思路是让父容器“包含”浮动子元素。

使用clearfix伪元素（推荐）

这是最常用且语义清晰的方法，在父元素上添加一个类，通过伪元素清除浮动：

• 给父容器添加类名，比如 class="clearfix"
• CSS中定义：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

注意：IE6/7需额外加 *zoom: 1 触发hasLayout（现代项目通常可忽略）。

设置父容器 display: flow-root（现代方案）

这是CSS新标准中更简洁的方式，无需额外HTML或伪元素：

立即学习“前端免费学习笔记（深入）”；

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

.container {
  display: flow-root;
}

它会创建一个新的块级格式化上下文（BFC），自动包含内部浮动元素，同时不破坏原有布局流。Chrome 64+、Firefox 58+、Safari 10.1+ 均支持。

用 display: block 包裹浮动子元素（慎用）

所谓“设置 display:block 的包裹层”，实际是指在浮动子元素外再套一层普通块级元素，并确保该层不浮动、不脱离文档流：

• HTML结构示例：
  <div class="parent">
    <div class="wrapper">
      <div class="float-left"></div>
      <div class="float-right"></div>
    </div>
  </div>
• CSS只需保证 .wrapper 是普通块级元素（默认就是），无需浮动、无需清除，父容器就能正确计算高度

但这种方式增加无意义的DOM节点，仅在无法修改CSS或兼容极老浏览器时考虑。

基本上就这些。优先用 display: flow-root，次选 clearfix，包裹层方式不推荐作为首选方案。