在网页开发中，经常会遇到内容超出容器大小的情况，这时就需要使用 CSS 的 overflow 属性来控制容器中内容的显示方式。
overflow 属性
overflow 属性用于控制元素的内容溢出时的表现方式。它有四个可能的值：
- visible：默认值，内容会溢出容器，并覆盖其他元素。
- hidden：内容会被裁剪，不会显示溢出部分。
- scroll：如果内容溢出，会显示滚动条。
- auto：如果内容溢出，会显示滚动条，但只有在需要时才显示。
---------- - ------ ------ ------- ------ --------- ------- -
在上面的示例中，当容器中的内容超出了 200px 的高度时，会显示垂直滚动条，以便用户可以滚动查看全部内容。
overflow-x 和 overflow-y
除了全局的 overflow 属性外，还有 overflow-x 和 overflow-y 分别用于控制元素水平和垂直方向的内容溢出。
---------- - ------ ------ ------- ------ ----------- ----- ----------- ------- -
在上面的示例中，容器会在水平方向上显示滚动条，但在垂直方向上隐藏溢出内容。
隐藏溢出内容
有时候我们希望隐藏溢出的内容而不显示滚动条，可以使用 overflow: hidden。
---------- - ------ ------ ------- ------ --------- ------- -
这样，当内容超出容器大小时，会被裁剪掉而不会显示在页面上。
总结
通过使用 overflow 属性，我们可以灵活地控制元素中内容的显示方式，避免内容溢出给页面布局带来不必要的影响。在实际开发中，根据需求选择合适的 overflow 值来优化页面布局。