css 中的 overflow 属性，作用是控制元素内容超出自身宽高范围时的显示方式，当子内容、文字、图片尺寸大于父容器的时候，默认内容会溢出并且把页面撑乱，overflow 就是用来处理这种溢出情况的核心属性，它是复合属性，可以同时设置横向 overflow-x 和纵向 overflow-y，也可以分开单独写 overflow-x、overflow-y，前端开发里 overflow 非常高频，常用于滚动条、隐藏溢出内容、创建 BFC 解决浮动塌陷、裁剪图片圆角溢出等场景，很多新手只知道滚动条用途，不知道 overflow 还有触发 BFC 这个重要特性，这也是面试高频考点，overflow 取值不同，溢出处理逻辑完全不一样，设置之后超出容器的内容不会自动撑开父盒子，而是按照属性值裁剪或者生成滚动条。
overflow 全部取值说明
| 属性值 | 作用 |
|---|---|
| visible | 默认值，内容溢出正常显示，不裁剪，会溢出盒子外部 |
| hidden | 溢出部分直接裁剪隐藏，不可见，不会出现滚动条 |
| scroll | 不管内容有没有溢出，强制显示横向 + 纵向滚动条 |
| auto | 内容溢出才自动出现滚动条，不溢出就不显示滚动条 |
| inherit | 继承父元素的 overflow 属性 |
拆分属性 overflow-x 与 overflow-y
- overflow-x：单独控制水平方向内容溢出
- overflow-y：单独控制垂直方向内容溢出
注意：如果只设置其中一个，另一个默认会变成 auto，这个是 CSS 规范里容易踩坑的点
深度重点：overflow 触发 BFC
当 overflow 取值为 hidden、scroll、auto 的时候，元素会创建 BFC（块级格式化上下文），这个特性可以解决：
- 子元素浮动造成父元素高度塌陷
- 外边距 margin 重叠问题
缺点：overflow:hidden 如果后续还有需要溢出显示的下拉菜单，就会被直接裁剪，所以做下拉弹窗的时候，父容器不能随便加 overflow:hidden
常见应用场景
- 文本超长省略号：搭配 text-overflow:ellipsis + white-space:nowrap + overflow:hidden
- 固定高度内容区，内部长列表滚动：overflow:auto
- 卡片圆角内部图片溢出裁剪：overflow:hidden
- 修复浮动塌陷：父盒子 overflow:hidden
代码示例
.box{
width:200px;
height:100px;
overflow:auto;
}
【常见问题】
问题 1 css 中的 overflow 属性 hidden 会创建 BFC 吗
回答 1 css 中的 overflow 属性取值 hidden、scroll、auto 都会创建 BFC，css 中的 overflow 属性 visible 不会触发 BFC。
问题 2 css 中的 overflow 属性 scroll 和 auto 区别是什么
回答 2 css 中的 overflow 属性 scroll 是永远显示滚动条，css 中的 overflow 属性 auto 只有内容溢出才出现滚动条。
问题 3 css 中的 overflow 属性为什么下拉菜单被裁掉
回答 3 父元素设置 css 中的 overflow 属性 hidden，溢出的下拉菜单就会被裁剪，这种情况就不能使用 css 中的 overflow 属性 hidden。
问题 4 css 中的 overflow 属性可以单独控制横向吗
回答 4 css 中的 overflow 属性可以拆分，使用 overflow-x 单独控制横向溢出，overflow-y 单独控制纵向溢出。
【免责申明】
本内容为 css 中的 overflow 属性基础知识点，不同旧浏览器对 overflow-x/overflow-y 规范存在少量兼容差异，正式项目需要考虑浏览器兼容测试。