17370845950

浮动导致父容器高度塌陷，因子元素脱离文档流且父容器未形成BFC；可用clear:both（加空标签）、overflow:hidden（有裁剪风险）或display:flow-root（现代最佳方案）解决。

浮动元素导致父容器高度塌陷，下方出现空白

这是浮动（float）最典型的副作用：子元素浮动后脱离文档流，父容器无法感知其高度，于是高度变为 0，看起来就像“下方突然多了一块空白”。实际不是空白，而是父容器没包住子元素，后续内容自然掉到浮动元素的底部位置去了。

• 常见现象：div 包着几个 float: left 的 img 或 section，下面的 footer 紧贴着顶部、或错位到浮动块右侧
• 本质原因：父容器没有形成新的 BFC（块级格式化上下文），且内部无非浮动内容撑高
• 注意：这个“空白”往往不是 margin 或 padding，调试时用浏览器开发者工具悬停会发现父容器高度确实是 0

用 clear: both 清除浮动（需额外 DOM 节点）

在浮动元素末尾插入一个带 clear: both 的空元素（如 ），能强制它下移到所有浮动元素下方，从而撑开父容器。

  A
  B
  

• 优点：语义明确，兼容性极好（IE6+ 都支持）
• 缺点：污染 HTML 结构，纯为样式目的添加无意义标签
• 不推荐在现代项目中使用，除非要兼容非常老的环境且不能改 CSS

用 overflow: hidden 触发 BFC（更常用但有副作用）

给父容器设置 overflow: hidden（或 auto、scroll）会强制它创建 BFC，BFC 容器会包含内部浮动子元素，高度恢复正常。

.container {
  overflow: hidden; /* 或 overflow: auto */
}

• 优点：无需改 HTML，一行 CSS 解决
• 风险：如果父容器本就有溢出内容（比如横向滚动的图表），hidden 会直接裁剪，auto 可能意外触发滚动条
• 替代方案：overflow: auto 更安全，但需测试是否引入多余滚动条；overflow: clip（现代浏览器）更精准，但 IE 不支持

更现代可靠的解法：display: flow-root

flow-root 是专为解决这个问题设计的 display 值，它会创建一个无副作用的 BFC 容器，不影响溢出行为，也不影响其他布局表现。

.container {
  display: flow-root;
}

• 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge

  

  79+；IE 完全不支持
• 优势：比 overflow 更语义化、更安全，是目前最佳实践
• 若需兼容旧版 Safari 或 Edge，可加回退：display: flow-root; display: -webkit-flow-root;（但实际 WebKit 旧版也不支持，不如用 overflow: auto 回退）

真正容易被忽略的是：很多开发者只盯着“清除浮动”，却忘了检查父容器是否设置了固定高度、min-height 是否被覆盖、或者浮动元素本身有没有 vertical-align 导致基线对齐异常——这些都可能表现为类似“空白”的视觉问题。先确认是不是真由浮动引起，再选对应方案。