父元素边框不可见的根本原因是浮动导致高度塌陷为0px，与box-sizing无关；修复需触发BFC（如display: flow-root）或清除浮动，而非调整box-sizing。
父元素加了 border 却看不见，不是颜色没生效，而是高度塌陷为 0px——边框没地方画；浮动溢出本身不直接撑破父容器，但会让父容器“算不出高度”，进而导致 border、padding、背景色全部失效。修复关键不在 box-sizing，而在让父容器重新包含浮动子元素。
为什么 box-sizing: border-box 不能解决父容器边框消失
box-sizing 控制的是**单个元素自身宽高的计算逻辑**，它决定 width 是否包含 padding 和 border。但父容器边框不可见，根本原因是浮动子元素脱离文档流，父容器高度坍缩为 0，和它自己的 box-sizing 值完全无关。
- 给父元素设
box-sizing: border-box后，它的width和height计算方式没变——问题压根不在“它自己尺寸算错”，而在于“它根本不知道子元素在哪” - 即使父元素写了
height: 200px，只要子元素浮动且未闭合，它的实际computed height在 DevTools 里仍显示0px - 常见误操作：在父元素上写
width: 100%; box-sizing: border-box;，结果边框还是不出现——因为高度仍是 0
真正有效的修复方式：触发 BFC 或清除浮动
必须让父容器形成一个新的**块级格式化上下文（BFC）**，才能强制它包裹浮动子元素，从而恢复可渲染的高度。
-
overflow: hidden最快见效，但副作用明显：内容超出时会被裁剪，下拉菜单、tooltip、position: absolute子元素可能被截断 -
overflow: auto更安全，但会多出滚动条，UI 上容易穿帮；overflow: visible（默认值）无效，它不触发 BFC -
display: flow-root是现代首选：语义清晰、无裁剪、无滚动条、兼容 Chrome 64+ / Firefox 58+ / Edge 79+；写法极简：.parent { display: flow-root; } -
::after伪元素清除法需写全：content: ""+display: table（或block）+clear: both；缺任意一项都无效，且必须作用于浮动子元素的**直接父容器**
浮动溢出本身怎么查、怎么压
父容器边框恢复后，若页面仍有横向滚动条或右侧白边，才是真正的“溢出”问题，这时才轮到 box-sizing 出场。
立即学习“前端免费学习笔记（深入）”；
- 用
document.body.scrollWidth > window.innerWidth在控制台快速验证是否存在横向溢出 - 开启
* { outline: 1px solid red }，直接暴露哪个元素的描边顶到了视口最右边缘 - 检查浮动子元素是否漏了
box-sizing: border-box：比如width: 50%+padding: 16px在content-box下实际宽度 =50% + 32px，极易超限 - 多个浮动子项并排时，总
width即使是33.333%× 3，也可能因四舍五入、默认margin或字体渲染微差略超100%，建议改用calc(100% / 3)或直接切display: flex
现代项目里最该忽略的方案
还在用 float 做布局？那才是根源问题。所有这些修复手段，本质都是在给过时方案打补丁。
-
float的设计初衷只是文字环绕图片，不是做栅格或侧边栏；flex和grid能天然避免高度塌陷和溢出计算混乱 - 如果只是为了让子元素左对齐，
display: flex; justify-content: flex-start更干净，无需清除、无塌陷、无溢出陷阱 - 老项目迁移成本高，至少把浮动限制在最小作用域；新功能一律用
flex或grid，别再给未来埋坑
真正容易被忽略的是：浮动必须逐层闭合。如果浮动嵌套了三层，只给最外层父容器加 flow-root，中间那层依然塌陷——每层需要包裹浮动子元素的容器，都得单独处理。
