父容器 height 为 0px 是因浮动元素脱离文档流导致塌陷；display: flow-root 是最安全的修复方式，强制创建 bfc 并撑开高度，无裁剪副作用。
父容器 border 看似“断开”或“只显示一线”，根本不是 border 写错了，而是它没地方画——父容器计算出的 height 是 0px。
为什么 float 会让父容器 height 变成 0px
浮动元素（float: left 或 float: right）会完全脱离普通文档流。父容器在布局时“看不见”它们，自然不会把它们的高度纳入自身高度计算。即使子元素设置了 height: 300px，父容器的 computed height 仍可能显示为 0px。
此时 border、padding、background-color 全部失效——没有高度，这些样式就无处渲染。
- 用 DevTools 的 Computed 面板直接看
height值：如果是0px，基本就能锁定是浮动塌陷 - 后续兄弟元素会上移，覆盖原本浮动区域，进一步掩盖问题
-
border-radius看似失效，其实只是画在一条不可见的线上
display: flow-root 是最干净的修复方式
display: flow-root 是专为解决这类问题设计的值，语义明确、无副作用、不裁剪内容、不触发滚动条，且已覆盖主流浏览器（Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+）。
写法极简：.parent { display: flow-root; }。它强制父容器建立一个新的块级格式化上下文（BFC），重新包含所有子元素（包括浮动项），高度自动撑开。
- 比
overflow: hidden更安全：不会意外裁剪position: absolute子元素 - 比伪元素清除更轻量：不用写
::after、不用记content和display: table - 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效
overflow: hidden 能快速生效但有隐藏风险
overflow: hidden 是最快见效的方案，原理也是触发 BFC，兼容性好（IE8+），代码只有一行。
但它本质是“让溢出内容不可见”，一旦父容器内有下拉菜单、tooltip、弹窗等 position: absolute 元素超出边界，就会被裁剪——这个副作用在开发阶段容易被忽略，上线后才暴露。
-
overflow: auto更保守，但会多出滚动条，UI 上可能穿帮 -
overflow: visible（默认值）完全无效，不触发 BFC - 若父容器本身是
display: inline或display: inline-block，overflow属性不生效
伪元素清除法必须满足三个硬条件
.clearfix::after 方案通用性强，但漏掉任意一个关键声明就失效：
-
content: ""必须存在（空字符串也行），否则伪元素根本不渲染 -
display: block或display: table不能省——仅clear: both不起作用 - 必须加在浮动子元素的直接父容器上，套多一层 wrapper 或加错位置都白搭
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体加载未完成、或 margin 折叠意外压缩了可用高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
