父容器高度为0是因浮动元素脱离文档流，导致自动高度计算忽略它们；display: flow-root创建BFC可彻底解决，clearfix需满足content、display、clear三条件才生效。
父容器高度变成 0，不是 CSS 出了 bug，而是 float 让子元素彻底退出标准文档流——父容器在计算 height: auto 时，根本不会把它们算进去。
为什么父容器 computed height 是 0px
浏览器对高度的自动计算只基于仍在文档流中的子元素。一旦子元素设置了 float: left 或 float: right，它就从“撑高名单”里被移除。即使该元素有 height: 300px、margin-bottom: 50px，父容器的 offsetHeight 和 getComputedStyle(el).height 仍可能返回 "0px"。
- 给父容器加
border或background-color后看起来“空了”，是因为没高度可渲染，不是样式没生效 -
min-height无效——它依赖内容撑高，而浮动内容不被视为“有效撑高内容” - 后续兄弟元素上移、覆盖浮动区域，是同一机制的连带表现，不是独立问题
display: flow-root 是最干净的现代解法
display: flow-root 是 CSS 明确为解决这类问题设计的属性：它创建一个新的 BFC（块级格式化上下文），强制父容器“重新包含”所有子元素，包括浮动的。
- 必须直接作用于**包裹浮动子元素的那个父容器**上；套一层 wrapper 或写在子元素上，都无效
- 不裁剪溢出内容（不像
overflow: hidden），也不影响子元素定位（不像position: absolute） - 兼容性到 Chrome 64+/Firefox 58+，但 IE 完全不支持；老项目需回退到
clearfix - 在 DevTools 的 Computed 面板里要能看到 “Block formatting context” 提示，才说明 BFC 真正生效
clearfix::after 必须满足三个条件才生效
伪元素清除浮动不是“加了就灵”，漏掉任意一个关键点都会失效：
- 必须写
content: ""—— 没这行，伪元素不渲染，clear: both就没作用对象 - 伪元素必须是块级且在文档流内：
display: table或display: block都可以，但不能是inline -
clear: both只对后续兄弟元素生效，所以伪元素得插在父容器末尾，且不能被display: none或visibility: hidden干扰 - 如果父容器本身设了
height或min-height，会覆盖 clearfix 带来的高度计算结果
overflow: auto/hidden 是副作用，不是清除方案
它们能“让高度回来”，是因为触发了 BFC，但本质不是修复浮动，而是绕过问题：
-
overflow: hidden会硬裁剪所有溢出内容，比如下拉菜单、position: absolute弹窗、负 margin 装饰，全都可能被切掉 -
overflow: auto在某些旧版 Safari 或 Chrome 中会误显滚动条，哪怕内容没溢出 - 两者都不改变子元素的
float行为，后续若混用flex或transform，BFC 包含逻辑可能突然失效 - DevTools 里看到高度“回来了”，不代表布局稳定——它只是在特定条件下碰巧管用
真正容易被忽略的是：浮动塌陷从来不是孤立现象。它常和图片加载闪动、jQuery .height() 返回 0、响应式断点下 margin 塌陷叠加出现。解决问题不能只盯一个样式声明，得确认 BFC 是否真实建立、伪元素是否渲染、父容器是否还被其他规则（如 height 固定值）覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
