17370845950

浮动元素导致父容器高度塌陷，解决关键是让父容器重新包含浮动子元素高度：推荐display: flow-root触发BFC；次选overflow: auto或clearfix伪元素法；禁用固定高度。

浮动元素会脱离文档流，导致父容器无法感知子元素高度，从而出现高度塌陷——父容器看起来“包不住”子元素。解决的关键是让父容器重新包含浮动子元素的高度。

方法一：触发BFC（推荐）

BFC（块级格式化上下文）能让容器包含内部浮动元素的高度。只需给父容器设置一个能触发BFC的CSS属性：

• overflow: auto 或 overflow: hidden（最常用，简洁有效）
• display: flow-root（现代标准写法，语义清晰，无副作用）
• float: left/right 或 position: absolute/fixed（不推荐用于此目的，会改变布局行为）

✅ 推荐用 display: flow-root ——专为解决此类问题设计，不影响溢出表现，兼容性也已覆盖主流浏览器（Chrome 64+/Firefox 58+/Edge 79+）。

方法二：使用clearfix清除浮动

在父容器末尾插入一个清除浮动的伪元素，撑开高度：

• 给父容器添加类如 .clearfix
• CSS中写：
  .clearfix::after { content: ""; display: table; clear: both; }

⚠️ 注意：不要用 display: block 配合 clear: both，它无法撑高父容器；display: table 或 display: table-cell 才能触发“匿名表格单元格”的高度计算机制。

为什么不直接用 height 或 min-height？

硬设高度违背响应式原则，一旦子内容增减（比如文字变多、图片加载），就会再次溢出或留白。真正的解决方案是让父容器“自动适应”，而不是人工估算。

基本上就这些。优先试 display: flow-root，老项目兼容性要求高就用 overflow: auto 或 clearfix。不复杂但容易忽略。