父容器高度塌陷是因浮动子元素脱离文档流导致height为0px，border随之不可见；解决方案首选display: flow-root触发BFC，其次overflow: hidden/auto，避免使用clearfix等过时hack。
父容器“丢失高度”不是盒模型本身失效，而是浮动子元素脱离文档流后，父容器在计算高度时直接跳过了它们——height变成 0px，border 自然画在看不见的地方。
float 导致父容器 height 计算为 0 的根本原因
浮动元素（float: left 或 float: right）会脱离普通文档流，不再参与父容器的高度计算。父容器就像“看不见”这些子元素一样，只按剩余非浮动内容撑高。如果子元素全浮动、父容器又没其他内容，getComputedStyle(el).height 就是 "0px"。
这不是 bug，是 CSS 规范行为。别怪 border 不显示——它画对了，只是画在了 0 高度的线上。
用 BFC 强制父容器包含浮动子元素
BFC（Block Formatting Context）会让容器把内部浮动元素纳入高度计算。只要让父容器成为 BFC，问题就解了。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root：最干净的选择，语义明确、无副作用，Chrome 64+/Firefox 58+ 支持 -
overflow: hidden：兼容性好，但会裁剪溢出内容（比如position: absolute子元素超出边界） -
overflow: auto：比hidden安全，滚动条仅在必要时出现，但仍可能意外触发 - 避免用
float或position: absolute触发 BFC：这会让父容器自身也脱离文档流，引发新布局问题
清除浮动（clearfix）现在基本不用了
传统 .clearfix::after 是靠插入一个 clear: both 的伪元素来“骗”出高度，本质是 hack，不是真正包含浮动。现代项目除非要兼容 IE8，否则没必要写三行兼容代码。
如果你看到这样的写法：
.parent::after {
content: "";
display: table;
clear: both;
}
它能工作，但不如一行 display: flow-root 直接可靠。而且一旦父容器加了 height 或 max-height，clearfix 也会失效——BFC 同样会受这些限制影响。
border 看不见？先确认 height 是否真实存在
别急着改 CSS，打开开发者工具看 Computed 面板里的 height 和 border-top-width 值：
- 如果
height是0px，说明确实是高度塌陷，优先试display: flow-root - 如果
height正常但 border 不见，检查是否被其他元素遮挡、border-color和背景色太接近、或误用了visibility: hidden - 父容器设了
height: 100px？那 BFC 也救不了——固定高度会压制自动计算
高度塌陷是个具体现象，BFC 是针对它的精确解法；而 border 显示与否，最终取决于 height 是否真实、是否可见、是否被覆盖。盯着数值，比猜更省时间。
