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

[haizhilin2013]

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

[xxf1996]

• visible（默认值）：溢出的内容会照常显示在元素内容区之外；
• hidden：溢出的内容会被裁剪；
• scroll：溢出的内容会出现在滚动区，通过滚动条滚动可以看到；
• auto：当内容溢出时表现同scroll；

参考文档：overflow - CSS（层叠样式表） | MDN

[HuoXiaoYe]

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

[HuoXiaoYe]

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

[dondonZh]

overflow溢出部分隐藏 可用于bfc

[Konata9]

题目还是要自己答的。

overflow 有下面几个属性。

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

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

参考文档：MDN overflow

[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;
    }