FED实验室 - 专注WEB端开发和用户体验

煦涵说CSS:overflow

煦涵说 煦涵 185℃ 0评论

煦涵说-深入CSS属性系列

在 [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]

可取值

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

visible

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

<style>
    .container {
        width: 100px;
        height: 100px;
        background-color: #f0f;
    }
</style>
<div class="container" id="container">
    至少有十年我不曾流泪
    至少有十首歌给我安慰
    可现在我会莫名的心碎
    当我想你的时候
    ...
</div>

hidden

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

<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

    <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,结果会变成两栏布局:

.content {
    overflow: hidden;
}
  1. 清除浮动
<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会在后面的文章中讲到,请持续关注。

感谢您的阅读

EOF
作者[煦涵]
2017年07月08日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址