父容器加了 border 却看不见，是因为浮动导致高度塌陷为 0px；display: flow-root 是最干净的修复方式，创建 bfc 包含浮动子元素；兼容 ie11 需用伪元素 clearfix 方案；overflow: hidden/auto 非语义化且有副作用。
父容器加了 border 却看不见，不是写错了颜色，而是高度塌陷为 0px —— 边框没地方画。
为什么 float 后父容器 border 会“消失”
浮动元素（float: left 或 float: right）会脱离普通文档流，父容器在计算自身高度时直接忽略它们。即使子元素有 height: 200px，父容器的 computed height 仍是 0px。边框、背景、padding 全部失效，后续兄弟元素会上移覆盖原区域。
在 DevTools 的 Computed 面板里直接看父容器的 height 值，如果是 0px，就坐实了是塌陷问题，不是样式写错。
display: flow-root 是最干净的修复方式
这是专为解决此类问题设计的 CSS 值，语义明确、无副作用、现代浏览器全覆盖（Chrome 64+ / Firefox 58+ / Edge 79+）。
-
display: flow-root会创建新的块级格式化上下文（BFC），强制父容器包含浮动子元素的高度 - 不会裁剪
position: absolute子元素，不触发滚动条，也不影响子元素的float行为 - 写法极简：
.parent { display: flow-root; } - 如果项目需兼容 IE11 及更早版本，才需要退回到伪元素方案
伪元素清除法（.clearfix）必须写全才生效
这是兼容性最好的后备方案，但漏掉任意一个关键声明就会失效。
-
content: ""必须存在，否则伪元素根本不渲染 -
display: block（或table）不能省——仅clear: both不起作用 - 必须加在浮动子元素的直接父容器上；嵌套多层浮动时，每一层要闭合的父容器都得单独处理
- DevTools 默认不显示
::after，需手动展开 Styles 面板里的伪元素节点确认是否激活
别用 overflow: hidden / auto “硬撑”高度
它们确实能“让边框回来”，但只是靠触发 BFC 的副作用，并非语义正确的解法。
-
overflow: hidden会裁剪所有超出内容，包括下拉菜单、tooltip、box-shadow等 -
overflow: auto在微小溢出（如字体下沉、负 margin）时也会意外显示滚动条，破坏布局对齐 - 若父容器已是
display: flex或display: grid，overflow属性不再触发 BFC（Chrome 105+ / Firefox 110+ 已按新规范实现） - 在
inline-block或table-cell容器中，overflow本身就不生效
最容易被忽略的一点：所有修复手段都只对浮动元素的直接父容器有效。如果浮动嵌套了三层，只给最外层加 flow-root，中间那层依然塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
