父元素边框不可见是因高度塌陷为0px，由浮动元素脱离文档流导致；overflow:hidden、clearfix或display:flow-root可触发bfc修复，但须作用于直接父容器。
父元素加了 border 却看不见，根本不是颜色写错了，而是父元素高度塌陷为 0px —— 边框没地方画。
父容器 height 为 0 是浮动的必然结果
浮动元素（float: left 或 float: right）会脱离普通文档流，父容器在计算高度时直接“忽略”它们。即使子元素有 height: 200px，父容器的 computed height 仍是 0px。
- 在 DevTools 的 Styles 面板里点开
Computed，直接看height值是不是0px - 边框、背景色、
padding全部失效，后续兄弟元素会上移覆盖浮动区 -
border-color再准也没用——没有高度，border就是画在一条线上，甚至完全不可见
overflow: hidden 能修复但有副作用
给父容器加 overflow: hidden 是最快见效的方式，它会触发 BFC，让父容器重新包含浮动子元素。
- 兼容性好（IE8+），代码简单：
.parent { overflow: hidden; } - 但风险明显：内容超出时会被裁剪，比如下拉菜单、tooltip、绝对定位弹层可能被截断
-
overflow: auto更安全，但内容溢出时会多出滚动条，UI 上容易穿帮 - 别用
overflow: visible（默认值）去“修复”，它不触发 BFC，毫无作用
.clearfix::after 必须写全才生效
伪元素清除法比空标签干净，但漏掉任意一个关键声明就会失效。
-
content: ""必须存在，否则伪元素根本不渲染 -
display: block（或table）不能省——仅clear: both不起作用 - 必须加在浮动子元素的**直接父容器**上，套多一层 wrapper 或加错位置都白搭
- DevTools 默认不显示
::after，需手动展开 Styles 面板里的伪元素节点确认是否激活
现代项目优先用 display: flow-root
display: flow-root 是专为解决这类问题设计的值，语义清晰、无副作用、且已覆盖主流浏览器（Chrome 64+ / Firefox 58+ / Edge 79+）。
- 写法极简：
.parent { display: flow-root; } - 不会裁剪内容，不引发滚动条，也不影响子元素的
float行为 - 和
overflow: hidden效果一致，但更可信——它明确告诉浏览器：“我要当一个独立的块级格式化上下文” - 如果项目还需兼容 IE11 及更早版本，才退回到
.clearfix方案
最容易被忽略的一点：所有这些方案都只对浮动元素的**直接父容器**有效；如果浮动嵌套了多层，每一层需要闭合的父容器都得单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
