浮动元素脱离文档流导致父容器高度塌陷，后续内容上移造成“下沉错觉”；常用清除方法有伪元素clearfix、overflow触发BFC、额外空标签三种。

浮动元素会脱离文档流，导致父容器无法正确计算高度，看起来就像“页面整体下沉”——实际是父容器高度塌陷，后面的内容向上顶上来了。

为什么父容器高度会塌陷

当子元素设置了 float: left 或 float: right，它就不再参与父容器的常规高度计算。如果父容器没有其他非浮动内容或固定高度，它的高度就会变成 0，视觉上就像“缩没了”，后续区块自然会上移，造成“下沉错觉”。

清除浮动的常用方法（推荐 3 种）

✅ 方法一：伪元素清除（现代推荐）
在父容器 CSS 中添加：

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

然后给浮动容器加 class="clearfix"。这是最干净、无额外 HTML 的方案，兼容性好（IE8+）。

✅ 方法二：overflow 触发 BFC（简单快捷）
直接给父容器设置：

.parent {
  overflow: hidden; /* 或 auto、scroll */
}

原理是让父容器形成 BFC（块级格式化上下文），BFC 区域会包含内部浮动元素，从而撑开自身高度。注意：慎用 overflow: hidden，可能意外裁剪溢出内容（如 dropdown、tooltip）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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

✅ 方法三：额外空标签清除（不推荐但易懂）
在浮动元素末尾加一个空标签：

<div class="clearfix">
  <div class="float-left">左</div>
  <div class="float-right">右</div>
  <div style="clear:both"></div>
</div>

虽然有效，但污染 HTML 结构，维护性差，仅适合临时调试。

检查是否还有遗漏浮动

常见疏漏包括：

• 多个浮动子元素中，最后一个没被清除
• 嵌套浮动容器未各自清除（每层浮动父容器都需处理）
• 使用了 transform、position: absolute 等也脱离文档流，但它们不会影响父容器高度计算逻辑——别和浮动混淆
• CSS 预处理器（如 Sass）中，clearfix 混入未正确引入或拼写错误

不复杂但容易忽略，关键是理解“浮动脱离文档流”这个核心，再对症选清除方式。优先用伪元素 clearfix，兼顾语义与健壮性。