overflow属性用于控制内容溢出时的显示方式，可设置visible、hidden、scroll、auto等值以管理容器溢出行为，解决布局混乱、滚动异常等问题，通过overflow-x和overflow-y可分别控制水平和垂直方向的溢出，常用于修复浮动塌陷、限制弹窗内容及实现响应式滑动效果。

如果您在设计网页时发现内容超出了容器边界，导致布局混乱或滚动异常，则可能是由于未正确控制元素的溢出行为。CSS 的 overflow 属性正是用于管理容器内内容溢出时的显示方式。以下是该属性的作用和使用方法：

本文运行环境：MacBook Pro，macOS Sonoma

一、控制内容溢出行为

overflow 属性决定了当一个块级元素的内容超出其边界时，是隐藏内容、显示滚动条，还是任由内容溢出。这在固定高度或宽度的容器中尤为重要，可以避免布局被撑开或内容遮挡。

1、将 CSS 中的 overflow 设置为 visible 时，超出容器的内容会正常显示在容器外部，这是默认行为。

2、设置为 hidden 时，超出部分将被裁剪且不可见，用户无法通过滚动查看被裁剪的内容。

3、设置为 scroll 时，无论内容是否溢出，都会显示滚动条，确保用户可以通过滚动查看全部内容。

4、设置为 auto 时，浏览器会根据内容是否溢出来自动决定是否显示滚动条，仅在需要时出现。

二、处理横向或纵向独立溢出

有时只需要控制垂直或水平方向的溢出，此时可使用 overflow-x 和 overflow-y 分别设置纵向和横向的溢出行为，实现更精细的布局控制。

1、使用 overflow-x 可单独控制水平方向的溢出，例如防止宽表格内容将页面拉宽。

2、使用 overflow-y 可单独控制垂直方向的溢出，常用于创建固定高度的侧边栏或弹窗内容区。

3、将 overflow-x 设为 hidden 而 overflow-y 设为 auto，可在保持垂直滚动的同时禁止水平滚动。

三、解决常见布局问题

overflow 属性常被用来修复因浮动元素或绝对定位导致的父元素塌陷问题，也可用于限制模态框或下拉菜单的内容显示范围。

1、为包含浮动子元素的父容器设置 overflow: hidden，可触发 BFC（块格式化上下文），使父元素正确包裹子元素。

2、在弹出式菜单或工具提示中使用 overflow: auto，可防止长列表内容突破可视区域。

3、在响应式设计中，对移动端菜单容器应用 overflow-y: scroll，确保内容可滑动浏览。