父级边框“消失”是因浮动子元素脱离文档流导致父容器高度坍缩为0px；display: flow-root可强制创建BFC解决此问题，兼容现代浏览器；旧版需用clearfix伪元素三要素（content、display: table、clear: both）；overflow方案有裁剪和滚动条等副作用。
父级边框“消失”不是样式没生效，是父元素 height 被算成了 0px——浮动子元素脱离文档流，父容器根本感知不到它们的存在。
为什么加了 border 却看不见
浏览器计算父容器高度时，只考虑仍在普通文档流中的内容。一旦所有子元素都设了 float: left 或 float: right，它们就从流中“抽离”，父容器的 computed height 就会坍缩为 0px。
- 在 DevTools 的 Computed 面板里直接查父元素的
height值，如果是0px，基本就能确认是塌陷问题 -
border、padding、background-color全部依赖真实高度；没有高度，这些样式就失去绘制基础 - 后续兄弟元素会上移，覆盖原本浮动区域，进一步掩盖塌陷现象
首选修复：用 display: flow-root
这是专为解决此类问题设计的 CSS 值，语义明确、无副作用、现代浏览器全覆盖（Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+）。
- 写法极简：
.parent { display: flow-root; } - 它强制创建新的块级格式化上下文（BFC），让父容器重新包含浮动子元素，高度自动撑开
- 不会裁剪
position: absolute子元素，不触发滚动条，也不影响子元素自身的float行为 - 如果父容器原本是
display: inline或display: inline-block，需先显式设为display: block，否则flow-root不生效
兼容旧浏览器：必须用 .clearfix::after
这是目前最稳妥的降级方案，但漏掉任意一个关键声明就会失效。
立即学习“前端免费学习笔记（深入）”；
- 三要素缺一不可：
content: ""（空字符串也行）、display: table（比block更稳）、clear: both - 必须加在浮动子元素的**直接父容器**上；嵌套多层浮动时，每一层需要闭合的父容器都得单独加
- DevTools 默认不显示
::after，需手动展开 Styles 面板里的伪元素节点确认是否激活 - 错误写法示例：
.parent { clear: both; }——这只对紧跟在浮动元素之后的兄弟元素生效，对父容器自身无效
为什么别用 overflow: hidden 或 overflow: auto
它们确实能“让边框回来”，但只是靠触发 BFC 的副作用，并非语义正确的解法。
-
overflow: hidden会裁剪所有超出内容，包括下拉菜单、tooltip、box-shadow、transform偏移元素 -
overflow: auto在微小溢出（如字体下沉、负margin）时也会意外显示滚动条，破坏布局对齐 - 若父容器已是
display: flex或display: grid，overflow不再触发 BFC（Chrome 105+ / Firefox） - 对
display: inline-block或display: table-cell的父容器，overflow属性本身无效
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体未就绪、或 margin 折叠异常导致 offsetHeight 仍为 0。修复完务必用 DevTools 确认父容器的 height 和 offsetHeight 是否已非零。
