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