CSS overflow 属性

CSS overflow 语法

在 CSS 中，overflow 属性用于控制当内容溢出元素的块级容器时，如何处理溢出部分。

语法：

overflow: 关键字;

说明：

overflow 属性有 4 种取值，如下表所示。

overflow 属性取值
取值	说明
visible（默认值）	溢出内容不会被裁剪，而是在元素框的外部显示
hidden	溢出内容会被裁剪，并且不可见。不提供滚动条
scroll	溢出内容会被裁剪，但浏览器会显示滚动条以便用户查看全部内容。无论内容是否溢出，都会显示滚动条（垂直和水平）
auto	溢出内容会被裁剪，如果内容发生溢出，则浏览器会显示滚动条以便用户查看全部内容。只有在内容溢出时才显示滚动条

对于 overflow 属性，我们需要清楚以下几点。

overflow 属性只作用于块级容器。
overflow 属性通常需要为元素设置一个固定的高度或宽度，否则内容可能不会溢出，从而看不到效果。
overflow-x 和 overflow-y 属性可以分别控制水平和垂直方向的溢出处理。

CSS overflow 摘要

属于	CSS 盒子模型
使用频率	高
是否继承	否
默认值	visible
兼容性	查看
官方文档	查看
MDN	查看

CSS overflow 示例

接下来，我们通过几个简单的例子来讲解一下 CSS overflow 属性是如何使用的。

示例 1：overflow: hidden; 隐藏溢出内容

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            overflow: hidden;   /* 隐藏溢出内容 */
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程、手册、图书等。</div>
    </div>
</body>
</html>

页面效果如下图所示。

overflow: hidden; 效果

分析：

在这个示例中，.box 设置了固定的宽度和高度，并且内容是一段较长的文本。由于设置了 overflow: hidden;，超出盒子范围的文本内容被隐藏了。

如果我们改为 overflow: scroll;，此时页面效果如下图所示。对于 overflow: scroll; 来说，即使内容没有完全溢出，也会显示水平和垂直滚动条。当内容溢出时，用户可以通过滚动条查看全部内容

overflow: scroll; 效果

如果我们改为 overflow: auto;，此时页面效果如下图所示。与 scroll 不同，auto 只在内容确实溢出时才会显示相应的滚动条（垂直或水平）。这是处理溢出内容最常用的方法。

overflow: auto; 效果

示例 2：使用 overflow: hidden; 清除浮动

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            overflow: hidden; /* 清除浮动 */
            border: 1px solid gray;
            margin: 20px;
        }
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin: 10px;
        }
        .box2 {
            background-color: lightskyblue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">浮动元素</div>
        <div class="box2">正常文档流中的内容。如果父容器没有清除浮动，这段内容可能会跑到浮动元素的下方。</div>
    </div>
</body>
</html>

页面效果如下图所示。

overflow: hidden; 清除浮动

分析：

overflow: hidden; 可以用于清除浮动，它一般在浮动元素的父元素中设置。对于这个例子来说，如果把 overflow: hidden; 删除，此时页面效果如下图所示。

去除 overflow: hidden; 的效果

从上面可以看出，当子元素设置了浮动（float）后，父元素如果没有设置高度，其高度可能会塌陷，导致父元素的边框或背景无法 “包裹” 住浮动元素。

在这种情况下，给父元素设置 overflow: hidden;（或者 auto、scroll）可以 “清除浮动”，使得父元素的高度能够包含浮动子元素。这是因为设置了 overflow 属性的块级元素会创建一个新的块级格式化上下文（BFC），而 BFC 会包含其内部的浮动元素。

overflow 是一个复合属性

overflow 其实是一个复合属性，它是以下 2 个属性的简写。