Skip to content

[css] 第90天 CSS的overflow属性定义溢出元素内容区的内容会如何处理呢 #748

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第90天 CSS的overflow属性定义溢出元素内容区的内容会如何处理呢

Activity

xxf1996

xxf1996 commented on Jul 15, 2019

@xxf1996
  • visible(默认值):溢出的内容会照常显示在元素内容区之外;
  • hidden:溢出的内容会被裁剪;
  • scroll:溢出的内容会出现在滚动区,通过滚动条滚动可以看到;
  • auto:当内容溢出时表现同scroll

参考文档:overflow - CSS(层叠样式表) | MDN

HuoXiaoYe

HuoXiaoYe commented on Jul 15, 2019

@HuoXiaoYe

overflow:hidden可以清除浮动,如果对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。

HuoXiaoYe

HuoXiaoYe commented on Jul 15, 2019

@HuoXiaoYe

补充一下:一般都是用伪元素清除浮动
.clearfix:after{content:"";display:block;line-height:0;height:0;visibility: hidden;clear:both;}

dondonZh

dondonZh commented on Jul 15, 2019

@dondonZh

overflow溢出部分隐藏 可用于bfc

Konata9

Konata9 commented on Aug 23, 2019

@Konata9

题目还是要自己答的。

overflow 有下面几个属性。

  • visible: 默认属性。对于溢出不做处理,仍然会显示。
  • hidden: 对于溢出部分会裁切。
  • scroll: 强制显示滚动条,如果有溢出部分可以滑动滚动条来查看。
  • auto: 当有溢出部分时,会显示滚动条。溢出部分可以滑动滚动条来查看。

除了 visible 之外,其他的属性都会触发 BFC。overflow:hidden 也常常被用来进去浮动的清除。

参考文档:MDN overflow

censek

censek commented on Jan 9, 2020

@censek

🌰:

<div class="box1">visible(默认值):溢出的内容会照常显示在元素内容区之外。</div>
<div class="blank"></div>
<div class="box2">hidden:溢出的内容会被裁剪;溢出的内容会被裁剪溢出的内容会被裁剪溢出的内容会被裁剪溢出的内容会被裁剪溢出的内容会被裁剪</div>
<div class="blank"></div>
<div class="box3">scroll:溢出的内容会出现在滚动区,通过滚动条滚动可以看到。</div>
<div class="blank"></div>
<div class="box4">auto:当内容溢出时表现同scroll。</div>
.box1 {
      width: 120px;
      height: 50px;
      border: 1px solid orangered;
      overflow: visible;
    }

    .box2 {
      width: 120px;
      height: 50px;
      border: 1px solid orangered;
      overflow: hidden;
    }

    .box3 {
      width: 120px;
      height: 50px;
      border: 1px solid orangered;
      overflow: scroll;
    }

    .box4 {
      width: 120px;
      height: 50px;
      border: 1px solid orangered;
      overflow: auto;
    }

    .blank {
      padding: 50px;
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@xxf1996@dondonZh@censek

        Issue actions

          [css] 第90天 CSS的overflow属性定义溢出元素内容区的内容会如何处理呢 · Issue #748 · haizlin/fe-interview