17370845950

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

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

为什么父容器高度会塌陷

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

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

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

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

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

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

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

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

检查是否还有遗漏浮动

常见疏漏包括：

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

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