overflow属性是CSS中一个非常有用的属性，它可以用来控制元素的溢出内容的呈现方式。overflow属性有以下几个取值：
- visible（默认值）：内容不会被修剪，会呈现在元素框之外。
- hidden：内容会被修剪，并且其余内容是不可见的。
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto：如果溢出则自动显示滚动条。
- inherit：规定应该从父元素继承 overflow 属性的值。
除了以上取值之外，还可以设置 overflow-x 和 overflow-y，用来控制元素的水平方向和垂直方向的溢出内容的呈现方式。其取值和 overflow 相同。
<!DOCTYPE html> <html> <head> <title>Overflow example</title> <style> .container { width: 200px; height: 100px; overflow: hidden; border: 1px solid #ccc; } .scroll { height: 200px; } </style> </head> <body> <h2>Overflow example</h2> <p>在这个例子中，我们可以通过改变盒子的高度来演示溢出内容的效果：</p> <div class="container"> <p>这是一个容器，它的高度设置为 100px， overflow 设置为 hidden。当内容超出容器的高度时，会被修剪，不会呈现在元素框之外。</p> </div> <div class="container scroll"> <p>这也是一个容器，它的高度设置为 200px， overflow 设置为 hidden。当内容超出容器的高度时，浏览器会显示滚动条以便查看其余的内容。</p> </div> </body> </html>
第一个盒子的 overflow 属性设置为 hidden，当内容超出容器的高度时，会被修剪，不会呈现在元素框之外。第二个盒子的 overflow 属性也设置为 hidden，但是它的高度超过了容器的高度，因此浏览器会显示滚动条以便查看其余的内容。
