HTML中的overflow属性用于处理元素的溢出内容，有以下几种取值：
- visible：默认值，内容会溢出元素边界，并显示在元素外部
- hidden：内容会被裁剪在元素内部，不会显示溢出的内容
- scroll：内容会被裁剪在元素内部，同时出现滚动条，以便查看溢出的内容
- auto：内容会被裁剪在元素内部，若有溢出内容，则出现滚动条，否则不出现
以下是一个完整的HTML页面示例，其中展示了如何使用overflow属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overflow示例</title>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: scroll; /* 溢出内容出现滚动条 */
}
.hidden {
width: 200px;
height: 100px;
border: 1px solid red;
overflow: hidden; /* 溢出内容被裁剪 */
}
.visible {
width: 200px;
height: 100px;
border: 1px solid blue;
overflow: visible; /* 溢出内容可见 */
}
.auto {
width: 200px;
height: 100px;
border: 1px solid green;
overflow: auto; /* 溢出内容出现滚动条，但只有当需要滚动时才出现 */
}
</style>
</head>
<body>
<h1>Overflow示例</h1>
<p>本示例演示了如何使用overflow属性处理元素溢出内容。</p>
<h2>scroll</h2>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.
</div>
<h2>hidden</h2>
<div class="hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.
</div>
<h2>visible</h2>
<div class="visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.
</div>
<h2>auto</h2>
<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.
</div>
</body>
</html>在上面的示例中，定义了四个带有不同overflow属性取值的div元素。其中，container类的元素设置了`overflow属性为hidden，表示超出容器范围的内容将被隐藏。scroll属性表示超出容器范围的内容将出现滚动条，以便用户可以滚动查看所有内容。visible属性表示超出容器范围的内容将被显示，超出的部分会覆盖其他元素。auto属性表示如果内容超出容器范围，则根据需要自动添加滚动条，否则内容将被正常显示。
在使用overflow属性时，需要注意以下几点：
- overflow属性只对具有固定高度或宽度的容器元素有效。
- overflow属性不能用于table元素或table-cell元素。
- overflow属性仅控制直接子元素的溢出行为。如果一个子元素的子元素溢出，这不会受到overflow属性的影响。
完整示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Overflow示例</title>
<style>
.container {
height: 100px;
width: 200px;
border: 1px solid black;
overflow: hidden;
margin-bottom: 20px;
}
.scroll {
height: 100px;
width: 200px;
border: 1px solid black;
overflow: scroll;
margin-bottom: 20px;
}
.visible {
height: 100px;
width: 200px;
border: 1px solid black;
overflow: visible;
margin-bottom: 20px;
}
.auto {
height: 100px;
width: 200px;
border: 1px solid black;
overflow: auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.</p>
</div>
<div class="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.</p>
</div>
<div class="visible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.</p>
</div>
<div class="auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar arcu non dolor maximus, quis ultrices sapien rutrum. Fusce varius, nisi at malesuada facilisis, tortor turpis consectetur purus, vel faucibus odio turpis eu lectus. Quisque ac velit euismod, bibendum quam vel, consectetur metus. Nunc sit amet mi a dolor laoreet faucibus vel sed felis. Proin pharetra velit eu sapien dictum faucibus. Sed vestibulum lacinia tellus eu interdum. Duis sollicitudin est eu est finibus, at feugiat sapien tristique. Praesent auctor sapien ac neque auctor, eu pulvinar turpis dignissim. Fusce scelerisque lorem ac metus congue, nec volutpat diam laoreet. Vestibulum congue massa id est lobortis, at luctus eros tristique. Curabitur blandit nunc non ligula commodo laoreet. Donec ut elit elit. Morbi at eleifend velit.</p>
</div>
</body>
</html>在这个示例中，我们创建了三个 <div> 元素，并将它们分别添加了不同的 overflow 属性：
- hidden：设置为 hidden 属性的 <div> 元素会裁剪超出其边界的内容，并隐藏所有溢出内容。在示例中，设置为 hidden 属性的 <div> 元素会隐藏其下方的文本内容。
- visible：设置为 visible 属性的 <div> 元素不会裁剪超出其边界的内容，而是允许其溢出并可见。在示例中，设置为 visible 属性的 <div> 元素会显示其下方的文本内容。
- auto：设置为 auto 属性的 <div> 元素将自动选择是否裁剪其溢出内容。如果该元素的内容超出其边界，它将自动添加滚动条以使用户能够查看其所有内容。在示例中，设置为 auto 属性的 <div> 元素将在内容超出其边界时添加滚动条。
需要注意的是，overflow 属性只适用于具有固定高度或宽度的元素。如果元素没有设置高度或宽度，则不会发生溢出。
正文完