目录

  1. 适用元素
  2. 可取值
    1. visible
    2. hidden
    3. clip
    4. scroll
    5. auto
  3. overflow 应用场景

在 [CSS1.0]规范中，当容器中的内容超过容器的边界时，会导致溢出内容与其他的内容重叠，被认为是开发者的错误。[CSS2.1]中引入了 overflow 属性，用来控制溢出内容的显示方式，是隐藏、裁剪还是自动处理。CSS Overflow Module Level 3引入了溢出隐藏的标准，更全面的定义了溢出的处理方式。overflow 有两种类型，一种是 text-shadow、box-shadow、boder-images、text-decoration 形成的 ink overflow，另一种就是我们常说的scrollable overflow。本篇内容将从定义到实践应用来深入 overflow 属性。

适用元素

  • block containers [CSS2.1]
  • flex containers [CSS3-FLEXBOX]
  • grid containers [CSS3-GRID-LAYOUT]

可取值

1
2
3
div {
    overflow: visible | hidden | clip | scroll | auto;
}

visible

默认值，内容超出容器边界，会产生溢出，和其他内容重叠，该容器不是一个scroll container，运行实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .container {
        width: 100px;
        height: 100px;
        background-color: #f0f;
    }
</style>
<div class="container" id="container">
    至少有十年我不曾流泪
    至少有十首歌给我安慰
    可现在我会莫名的心碎
    当我想你的时候
    ...
</div>

hidden

该属性内容超出容器边界，不会溢出，但是可以使用 javascript 脚本控制滚动，该容器仍然是一个 scroll container，查看下面示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container {
        width: 100px;
        height: 100px;
        background-color: #f0f;
        overflow: hidden;
    }
</style>
<div class="container" id="container">
    至少有十年我不曾流泪
    至少有十首歌给我安慰
    可现在我会莫名的心碎
    当我想你的时候
    ...
</div>
<script>
    (function() {
        var container = document.querySelector('#container');
        container.scrollTop = 80;
    })();
</script>

clip

该属性和 overflow: hidden 很相似，它可以按 clip 区域进行裁切，但是和hidden 属性不同的是该属性禁止通过 javascript 脚本滚动，该容器不是一个 scrooll container，这个属性现在浏览器还没有支持。

scroll

该属性会默认产生滚动条，内容不会溢出容器；用户可以操作滚动条进行滚动，也可以通过脚本滚动。但是在打印（print）模式时，可能会打印溢出的内容。

auto

该属性会随容器内容溢出情况，自动判断是否出现滚动条；

PS：如果该块级容器的 overflow 属性值不是 visible，会默认为它的内容创建一个新的 ”块级格式化上下文“（BFC）。

overflow 应用场景

  1. 常见容器溢出处理，并可以通过设置水平（overflow-x）和垂直（overflow-y）方向上的个性化处理

  2. 两栏布局，在此布局中经常使用 overflow 来触发 BFC

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <style>
        .container {
            width: 100px;
            height: 100px;
            background-color: #f0f;
            overflow: hidden;
        }
        .fr {
            float: right;
            width: 50px;
            height: 50px;
            background-color: #f00;
        }
    </style>
    <div class="container" id="container">
        <div class="fr"></div>
        <div class="content">
            至少有十年我不曾流泪
            至少有十首歌给我安慰
            可现在我会莫名的心碎
            当我想你的时候
            ...
        </div>
    </div>

    上面实例是我们最常见的文字环绕，如果我们增加如下 css，结果会变成两栏布局：

1
2
3
.content {
    overflow: hidden;
}
  1. 清除浮动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>
        .container {
            width: 100px;
            background-color: #f0f;
        }
        .fl {
            float: left;
            width: 40px;
            height: 50px;
            overflow: hidden;
        }
        .fr {
            float: right;
            width: 50px;
            height: 50px;
            background-color: #f00;
        }
    </style>
    <div class="container" id="container">
        <div class="fr"></div>
        <div class="fl">
            至少有十年我不曾流泪
            至少有十首歌给我安慰
            可现在我会莫名的心碎
            当我想你的时候
            ...
        </div>
    </div>
    预览上面代码，你会发现 container 容器的高度为0，当你给 container 设置 overflow: hidden 时，会创建一个新的 块级格式化上下文，新的块级上下文可以包裹浮动流，从而不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。关于清除浮动原理及BFC会在后面的文章中讲到，请持续关注。

感谢您的阅读

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。