父元素高度为0是因浮动子元素脱离文档流；可用overflow:hidden触发bfc修复，但会裁剪溢出内容；伪元素::after清除浮动更干净；flexbox布局下无需清浮动，应避免float与flex混用。

父元素高度为 0 是因为子元素 float 脱离文档流

只要子元素用了 float: left 或 float: right，它就不再参与父元素的高度计算——这是浏览器渲染规则，不是 bug。父元素表现为空盒子（border/背景不显示、后续元素上移），常见于导航栏、两栏布局、旧式卡片结构。

用 overflow: hidden 最快但得小心溢出内容

给父元素加 overflow: hidden 是最轻量的修复方式，它会触发 BFC（块格式化上下文），强制包含浮动子元素。

• 兼容性好，IE6+ 都支持
• 副作用是：如果子元素实际宽度或高度超出父容器，会被裁剪，且滚动条不会出现（hidden 的语义就是“不显示溢出”）
• 若需保留滚动能力，改用 overflow: auto，但某些旧版 Safari 对 auto 渲染不稳定
• 别漏掉 IE6–7 的兼容写法：zoom: 1（触发 hasLayout）

用伪元素 ::after 清除浮动更干净

现代项目推荐这个方案，HTML 无侵入，语义清晰，且不干扰溢出行为。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 标准写法是：

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

• display: table 比 block 更稳妥，避免部分浏览器下 height: 0 失效
• 必须确保父元素没设置 display: flex 或 display: grid，否则伪元素清除无效（flex/grid 容器本身已建立新格式化上下文）
• 别只写 ::after 而忘了在父元素 class 上加 clearfix，否则样式不生效

Flexbox 布局下根本不需要清浮动

如果你的父元素已经设了 display: flex，那子元素再用 float 是无效且危险的——float 在 flex 容器中被忽略，但会破坏对齐逻辑，还可能引发 Safari 旧版本渲染异常。

• 正确做法是：去掉子元素的 float，改用 flex: 1、margin 或 justify-content 控制位置
• 如果父元素高度仍塌陷，大概率是它的父级没提供高度上下文（比如没设 min-height 或没继承 height: 100%）
• 注意：flex 容器默认 flex-direction: row，垂直撑满需配合 flex-direction: column 或显式设 height

真正容易被忽略的是：清除浮动只是补救措施，而现代布局应该主动规避 float。一旦项目允许，优先用 flex 或 grid 替代 float 布局；若必须兼容老系统，overflow: hidden + zoom: 1 是最稳的兜底方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！