关于css:overflow-clip

大家都晓得 overflow 之前有几个属性：visible、hidden、scroll、auto。这几个属性就不详解了。而最近 Chrome 刚公布的 90 版本中，又反对了一个新的值 clip，以及配合它应用的overflow-clip-margin 属性。
来看看 overflow: clip 的意思:

Like for hidden, the content is clipped to the element’s padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use display: flow-root to do so.
overflow-clip-margin的意思：
The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped.

好简单。先来看个简略的例子吧。

.box{
  margin: 10px;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

.hidden{
  margin: 10px;
  width: 200px;
  height: 100px;
  overflow: hidden;
  border: solid 1px;
}

.clip{
  width: 200px;
  height: 100px;
  overflow: clip;
}

.margin{overflow-clip-margin: 30px}

请戳此预览 >>>>

乍一看，overflow: clip在独自应用的时候，和 overflow: hidden 没啥区别，只是在应用 overflow: clip 之后，咱们能够设置一个溢出内容裁切的值，来管制溢出显示的区域。

然而咱们看官网解释有一句：The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use display: flow-root to do so.，这是啥意思呢，再来看一个例子：

这是从 MDN 官网上扒来的一个对于 BFC 的代码例子。在上面的示例中，咱们在利用了边框的 div 中有一个浮动元素。该 div 的内容与浮动元素一起浮动。因为 float 的内容比它旁边的内容高，所以当初 DIV 的边框贯通了 float。

.box {
    width: 400px;
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}   

显示的成果如下：

如果咱们给父元素 box 加上overflow: hidden，会主动创立蕴含浮动的新 BFC。当初，咱们的 DIV 在布局中变成了一个迷你布局。任何子元素都将蕴含在其中，如图：

.box {
    width: 400px;
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: hidden;
}

如果将overflow: hidden 替换成为 overflow: clip，那么将显示如下图：

.box {
    width: 400px;
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: clip;
}

因为没有创立格式化上下文，所以间接把多余的局部裁切掉了。
如果想显示实现，再加一句 display: flow-root 即可。

.box {
    width: 400px;
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: clip;
    display: flow-root;
}

戳此试一试 >>>>

Chrome 官网还给出了一个阐明：

Using overflow: clip makes it possible for you to prevent any type of scrolling for the box, including programmatic scrolling. That means the box is not considered a scroll container; it does not start a new formatting context, which gives it better performance than overflow: hidden. And if you need it, you can apply clipping to a single axis via overflow-x and overflow-y.`

overflow: clip应用的时候不会创立格式化上下文，这样在性能方面，绝对 overflow:hidden 是要好一些的。

然而当初 90 版本刚公布，要等到这个属性能宽泛应用，还有很远的间隔……

参考：

https://developer.chrome.com/…

https://developer.mozilla.org…