在网页布局开发过程中，当容器内的内容尺寸超过容器本身设定的范围时，就会出现内容溢出的情况。要妥善处理这类问题，需要同时理解css盒模型的计算规则和overflow属性的作用机制，两者结合才能实现对溢出内容的合理控制。
盒模型的基本构成
css盒模型是网页元素布局的基础计算规则，每个元素都可以看作是一个矩形的盒子，盒子的总尺寸由内容区、内边距、边框、外边距共同决定。默认情况下，也就是box-sizing属性取值为content-box时，我们给元素设置的width和height仅代表内容区的尺寸，元素的总宽度需要加上左右内边距和左右边框的宽度，总高度需要加上上下内边距和上下边框的高度。
如果设置box-sizing: border-box，那么设置的width和height会包含内容区、内边距和边框的尺寸，元素的总尺寸就是设置的宽高值，内边距和边框会向内挤压内容区的空间，这个特性会直接影响内容溢出的触发条件。
overflow属性的取值说明
overflow属性用来控制当内容溢出元素内容区时的显示方式，它有以下几个常用取值：
- visible：默认值，溢出的内容会正常显示在元素外部，不会被裁剪，可能会覆盖其他元素的内容。
- hidden：溢出的内容会被裁剪，超出元素范围的部分不可见，也不会显示滚动条。
- scroll：无论内容是否溢出，元素都会显示横向和纵向的滚动条，溢出内容可以通过滚动查看。
- auto：只有内容溢出时才会显示对应的滚动条，内容未溢出时不会显示滚动条，是更灵活的取值。
两者结合处理内容溢出的实践
默认盒模型下的溢出处理
当使用默认的content-box盒模型时，内容区的尺寸是固定的，添加内边距和边框会扩大元素的总尺寸，但如果内容区的内容本身超过了设置的宽高，就会触发溢出。下面的示例演示了这种情况下的overflow处理：
/* 默认盒模型设置 */
.container {
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #333;
box-sizing: content-box; /* 默认值，可省略 */
overflow: auto; /* 内容溢出时显示滚动条 */
}
<div class="container">
这是一段测试内容，当这段内容的高度超过容器内容区的高度时，就会触发溢出。这里添加更多内容来模拟溢出场景，比如再补充一些文字，让内容的总高度超过150px的内容区高度，这样就能看到overflow属性的作用效果。
</div>
在上面的例子中，容器的内容区高度是150px，加上上下内边距各20px和上下边框各2px，容器的总高度是194px。如果内部文字内容的高度超过150px，就会触发溢出，此时overflow设置为auto，会显示纵向滚动条。
border-box盒模型下的溢出处理
当使用border-box盒模型时，设置的宽高已经包含了内边距和边框，内容区的尺寸会被内边距和边框挤压，更容易触发内容溢出，这时候overflow的作用会更加明显：
/* border-box盒模型设置 */
.box {
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #666;
box-sizing: border-box;
overflow: hidden; /* 溢出内容直接裁剪 */
}
<div class="box">
这是border-box盒模型下的测试内容，此时容器的总宽高就是200px*150px，内容区的高度只有150px减去上下内边距40px再减去上下边框4px，也就是106px，内容很容易超过这个高度，溢出部分会被hidden裁剪掉。
</div>
这个例子中，容器的总尺寸固定为200px*150px，内容区高度只有106px，只要内部内容高度超过106px就会溢出，overflow设置为hidden后，超出的部分会直接被隐藏，不会显示在容器外部。
常见注意事项
在实际开发中需要注意，overflow属性只对具有固定尺寸（设置了width和height）的块级元素生效，如果元素没有设置固定高度，内容会自然撑开元素高度，不会触发溢出。另外，overflow属性还可以分别设置横向和纵向的处理方式，使用overflow-x和overflow-y单独控制横向和纵向的溢出行为，比如可以设置overflow-x: hidden; overflow-y: auto，只裁剪横向溢出内容，纵向溢出时显示滚动条。
同时要注意，当元素设置了overflow: hidden时，内部的绝对定位元素如果超出容器范围，也会被裁剪，这个特性有时候可以用来实现一些特殊的布局效果，比如圆形头像裁剪等场景。
css_overflow盒模型内容溢出box_sizing修改时间：2026-07-03 05:15:21