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，但是它的高度超过了容器的高度，因此浏览器会显示滚动条以便查看其余的内容。
