在写页面的时候，如果给一个div定了宽高，里面的文字或者图片太多，内容就会撑破容器跑到外面，造成周围元素被挤歪，也就是常说的错位。css里有个overflow属性，就是专门管容器装不下时多余内容怎么显示的。
为什么内容会超出容器
容器一般靠width和height限制大小。但子元素内容真实尺寸超过这个限制，且容器没设overflow相关规则时，浏览器默认让内容可见并溢出，于是后面的块就被推走或盖住，看起来就像错位。
overflow属性的常用值
overflow可作用于块级容器，主要取值有下面几种：
- visible：默认值，超出部分直接显示，不管容器边界。
- hidden：超出部分裁掉，用户看不到，也不会出滚动条。
- scroll：无论超不超都显示滚动条，超出的可滚去看。
- auto：内容没超就不显滚动条，超了才显，最常用。
单方向控制
也可分别设overflow-x与overflow-y，例如只允许上下滚：
.box {
width: 300px;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
}
用hidden解决错位
当确认超出内容不重要，只想保布局整齐，用hidden把多余切掉最省事：
<div class="card"> <p>这是一段很长的文本会被截断不会撑破盒子</p> </div>
.card {
width: 200px;
height: 60px;
border: 1px solid #ccc;
overflow: hidden;
}
用auto提供滚动查看
若内容都要给用户看到，又不想错位，用auto让容器自己出滚动条：
.panel {
width: 100%;
max-height: 300px;
overflow: auto;
}
注意事项
设overflow非visible时，容器会建新的块级格式化上下文，浮动能被包住。但hidden会剪掉focus元素，做可访问性时要小心。另外table元素对overflow支持有限，需要外层套div来控制。
总结：内容超出容器导致错位，优先给容器加overflow:auto或hidden，按业务决定是要滚动查看还是直接隐藏，即可稳住布局。