子元素突破父容器通常因尺寸超限、绝对定位、内边距或边框导致盒模型溢出，可通过设置 overflow: hidden 裁剪溢出内容，但需注意隐藏阴影等副作用，建议结合 box-sizing、max-width 和 Flex/Grid 布局优化结构。
在CSS盒模型中，子元素突破父容器是一个常见布局问题。当子元素的尺寸或位置超出了父容器的范围，就可能发生溢出。解决这类问题最直接有效的方式之一是使用 overflow 属性来控制溢出内容的显示方式。
为什么子元素会突破容器？
子元素突破父容器通常由以下几种情况引起：
- 设置了较大的宽度或高度，超过父元素限制
- 使用了绝对定位（position: absolute）脱离文档流并超出边界
- 内边距（padding）或边框（border）增加了实际占用空间，触发盒模型计算溢出
- 浮动元素未正确清除，导致布局错乱
用 overflow 隐藏溢出内容
通过给父容器设置 overflow 属性，可以控制子元素溢出时的表现形式：
- overflow: hidden —— 超出部分被裁剪且不可见，这是最常用的隐藏溢出方式
- overflow: scroll —— 始终显示滚动条，无论是否溢出
- overflow: auto —— 只有在内容溢出时才出现滚动条
例如，当你有一个固定大小的卡片区域，内部图片或文字可能过大时：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 200px;
height: 150px;
overflow: hidden;
border: 1px solid #ccc;
}
.card img {
width: 100%;
height: auto;
}
这样即使图片原始尺寸很大，也会被限制在 .card 内部，多余部分自动隐藏。
注意事项与替代方案
虽然 overflow: hidden 能快速解决问题，但也有一些副作用需要注意：
- 它会同时隐藏所有溢出内容，包括你可能想保留的阴影或提示信息
- 某些情况下会影响 z-index 表现或导致圆角遮挡问题
- 不能解决根本布局结构不合理的问题
更优的做法还包括：
- 使用 box-sizing: border-box 精确控制盒模型尺寸
- 合理设置最大宽高（max-width / max-height）防止内容撑开
- 利用 Flex 或 Grid 布局自动分配空间，避免手动计算尺寸
