元素被挤出容器主因是盒模型计算、文档流脱离、空白符间隙及Flex/Grid伸缩失控；需统一box-sizing: border-box、清除浮动、处理白空间、合理设置flex/grid属性。
元素被挤出容器，通常不是“意外”，而是盒模型计算结果的自然体现。关键在于理解 width、padding、border、margin 如何共同决定元素实际占用空间，以及父容器如何响应子元素的尺寸。
默认 box-sizing 导致宽度“超支”
CSS 默认使用 content-box 盒模型：设置 width: 100px 仅指内容区宽，再加上 padding 和 border 就会撑大总宽度。若父容器宽度固定（如 width: 300px），子元素设了 width: 100%; padding: 20px; border: 2px solid，实际宽度 = 300 + 40 + 4 = 344px → 溢出。
-
解决方法：统一使用
box-sizing: border-box，让 width 包含 padding 和 border - 推荐全局重置：
* { box-sizing: border-box; }（注意性能影响极小，现代项目普遍采用）
内联元素或浮动元素脱离文档流
像 、width/height 但未改 display，可能表现异常；而 float 会让元素脱离正常流，导致父容器无法正确包裹，看起来像“被挤出去”。
- 检查是否误用 float：清除浮动（
clear: both）或用 BFC 方式（如overflow: hidden）包裹父容器 - 对需设宽高的内联元素，显式声明
display: inline-block或display: block
白空间与换行符引发的看不见的外边距
HTML 中标签间的空格、换行，在 inline 或 inline-block 元素间会渲染为一个空格字符，产生约 4px 水平间隙。多个并排元素累加后，可能突破父容器宽度限制。
立即学习“前端免费学习笔记（深入）”；
- 常见于 flex 容器未启用前的 inline-block 布局
- 解决方式：父容器设
font-size: 0，子元素再单独设字体大小；或移除 HTML 中的空白符；或改用 flex/grid 布局替代
Flex/Grid 容器中未控制子项伸缩行为
在 display: flex 容器中，子项默认有 flex-shrink: 1，会压缩自身；但若设了 min-width 或内容不可折行（如长单词、URL），仍可能溢出。Grid 中类似，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 可防溢出，但若列宽写死（如 200px 200px）且内容过宽，也会撑破容器。
- 对文本内容，添加
word-break: break-word或overflow-wrap: break-word - 对 flex 子项，必要时设
flex-shrink: 0防压缩，或用min-width: 0允许内容区域收缩
不复杂但容易忽略。盯住盒模型、文档流、空白处理和布局上下文这四个层面，90% 的“被挤出”问题都能快速定位。
