overflow样式用于控制当一个元素的内容超出其指定的尺寸时会发生什么。当元素的内容超出其指定的尺寸时，将会产生一个滚动条，或者将内容裁剪，或者将内容溢出元素的边界。
overflow属性可以设置以下几个值：
visible：默认值。内容超出元素的边界后会显示在元素的外部。
hidden：内容超出元素的边界时会被裁剪，不会被显示出来。
scroll：会产生一个滚动条，可以滚动查看超出边界的内容。
auto：与scroll相似，但只在需要时产生滚动条。
以下是一个使用overflow属性控制滚动条的示例：
HTML代码：
<div class="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis felis. Fusce in quam non erat rutrum blandit. Nulla fringilla odio eget sapien fermentum, a lobortis mauris semper. Nam lobortis, mauris eu pellentesque gravida, libero leo congue mauris, sit amet dictum urna justo sit amet nunc. Etiam ut lorem non magna imperdiet vestibulum.</p>
</div>
CSS代码：
.scroll {
width: 200px;
height: 100px;
overflow: scroll;
}
在这个例子中，我们创建了一个<div>元素，并将其设置为具有scroll类，以便在CSS中引用它。
我们将其设置为200像素宽、100像素高，并使用overflow属性将其内容溢出时产生一个滚动条。
请注意，overflow属性只对具有指定尺寸的元素有效，对于没有指定尺寸的元素，它将不起作用。
下面是一个使用overflow属性的实例，当内容超出元素边界时，会产生一个滚动条：
HTML代码：
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis felis. Fusce in quam non erat rutrum blandit. Nulla fringilla odio eget sapien fermentum, a lobortis mauris semper. Nam lobortis, mauris eu pellentesque gravida, libero leo congue mauris, sit amet dictum urna justo sit amet nunc. Etiam ut lorem non magna imperdiet vestibulum.</p>
</div>
</div>
CSS代码：
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
}.content {
width: 300px;
height: 200px;
}
在这个例子中，我们创建了一个父元素<div>，指定了其宽度和高度，并设置了边框。
我们在父元素内创建了一个子元素<div>，并将其设置为更大的宽度和高度。
我们使用overflow属性在父元素上设置滚动条，并设置为auto，这意味着只有在需要时才会产生滚动条。
当我们在子元素中添加足够多的文本时，内容将会超出父元素的边界，此时父元素将产生一个滚动条，以便查看所有文本内容。