父元素 border“被截断”是因为浮动导致高度塌陷为0px；display: flow-root是首选修复方案，可创建bfc使父容器包含浮动子元素；兼容旧浏览器需用clearfix伪元素三要素；overflow方案有副作用且不语义化。
父元素加了 border 却看起来“被截断”，不是边框画错了，而是父元素的 height 实际为 0px —— 边框没地方渲染，自然就“断”在一条线上，甚至完全不可见。
为什么浮动会让父元素 border 显示不全
浮动子元素（float: left 或 float: right）会脱离普通文档流，父容器在计算自身高度时直接忽略它们。即使子元素有 height: 200px，父容器的 computed height 仍可能是 0px。
- 用 DevTools 的 Computed 面板直接查父容器的
height值，如果是0px，基本就能确认是塌陷问题 -
border、padding、background、box-shadow全部依赖真实高度，没有高度，这些样式就失去绘制基础 - 后续兄弟元素会上移，覆盖原本浮动区域，进一步掩盖塌陷现象
修复首选：display: flow-root
这是专为解决此类问题设计的 CSS 值，语义明确、无副作用、现代浏览器全覆盖（Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+）。
-
display: flow-root强制创建新的块级格式化上下文（BFC），让父容器重新包含浮动子元素，高度自动撑开 - 不会裁剪
position: absolute子元素，不触发滚动条，也不影响子元素的float行为 - 写法极简：
.parent { display: flow-root; } - 若父容器已是
display: inline或display: inline-block，需先显式设为display: block，否则flow-root不生效
兼容 IE11 及更早版本：必须用伪元素 .clearfix
这是目前最稳妥的降级方案，但漏掉任意一个关键声明就会失效。
- 必须三要素齐全：
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 110+ 已按新规范实现） - 在
inline-block或table-cell容器中，overflow本身就不生效
最容易被忽略的一点：所有修复手段都只对浮动元素的直接父容器有效。如果浮动嵌套了三层，只给最外层加 flow-root，中间那层依然塌陷 —— 这时候你看到的“截断”，其实是中间层的 border 在 0 高度上被渲染，和最外层无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
