box-sizing: border-box 是起点，不是终点；需作用于子元素或全局重置，配合 max-width: 100%、min-width: 0、word-break 等才能彻底解决溢出问题。
box-sizing: border-box 是起点，不是终点
父容器设了 width: 300px 和 height: 200px，子元素却撑破它，大概率是因为子元素用了 padding 或 border，而默认的 box-sizing: content-box 把这些额外尺寸加在 width/height 之外。直接给子元素加 box-sizing: border-box 能让 width: 100% 真正等于“占满父容器可用空间”，但注意：box-sizing 不影响 margin，也不解决长文本、图片或弹性项目收缩失败的问题。
常见错误是只给父容器设 box-sizing——它对子元素无效；必须显式作用于子元素，或用全局重置：
*, *::before, *::after { box-sizing: border-box; }
如果子元素是图片或表单控件，还得单独加 max-width: 100% 和 height: auto，否则 box-sizing 对它们没作用。
flex 布局下子项不收缩？先看 min-width: 0
父容器用了 display: flex，子元素依然横向撑破，问题不在 flex-shrink 默认值（它是 1），而在于浏览器给内联内容（如文字、<span></span>）设的隐式 min-width: auto——它会阻止子项缩到比内容还窄。不加 min-width: 0，flex-shrink: 1 就是摆设。
-
min-width: 0是开关，必须显式写在需要收缩的子元素上 - 搭配
flex-shrink: 1（或简写为flex: 1）才生效 - 若子项含长 URL 或无空格英文，还得加
word-break: break-all或overflow-wrap: break-word
例如一个卡片内的标题和描述：
.card-content { display: flex; flex-direction: column; }
.title { min-width: 0; flex-shrink: 1; }
.description { min-width: 0; flex-shrink: 1; word-break: break-word; }
overflow: hidden 不是隐藏，是触发 BFC
给父容器加 overflow: hidden 看似“藏住”了溢出，实际是让它生成 BFC（块级格式化上下文），从而正确包裹浮动、绝对定位或弹性溢出的内容。但它有硬伤：裁剪掉所有超出区域的东西——下拉菜单、tooltip、阴影、甚至 position: absolute 的子元素都可能消失。
更稳妥的替代方案：
- 用
display: flow-root替代overflow: hidden，语义清晰且无裁剪副作用 - 对图片强制
max-width: 100%，比依赖overflow更主动 - Grid 布局中改用
grid-template-columns: repeat(3, minmax(0, 1fr)))，但需配合子项的min-width: 0
别对弹窗、下拉面板这类容器盲目加 overflow: hidden，调试时发现元素突然不见，八成是它干的。
margin 塌陷导致父容器“被顶开”，和盒模型无关
父容器高度莫名变高，顶部或底部多出空白，检查子元素是否用了 margin-top 或 margin-bottom。这不是盒模型问题，而是 margin 塌陷：当父容器没有 border、padding 或内容时，子元素的垂直外边距会“穿透”出来，直接作用于父容器边界。
解决方式不是调 box-sizing，而是切断塌陷链：
- 给父容器加
display: flow-root（推荐，专为此设计） - 或加
padding: 0.1px（最小视觉干扰） - 避免用
overflow: hidden应对 margin 塌陷——它虽能触发 BFC，但附带裁剪风险
特别注意：Flex 和 Grid 容器天然不发生 margin 塌陷，所以把父容器改成 display: flex 或 display: grid 是最干净的解法，顺便还能获得现代布局能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
