目录

  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-shadowbox-shadowboder-imagestext-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会在后面的文章中讲到,请持续关注。

感谢您的阅读