大家都知道overflow之前有几个属性：visible,hidden,scroll,auto。不详细解释这些属性。并且在最近发布的Chrome90版本中，支持了一个新的valueclip，以及与之配合使用的overflow-clip-margin属性。我们来看看overflow的含义：clip：和hidden一样，将内容裁剪到元素的paddingbox。clip和hidden的区别在于clip关键字还禁止所有滚动，包括程序化滚动。该框不是滚动容器，也不会启动新的格式化上下文。如果你想开始一个新的格式化上下文，你可以使用display:flow-root来这样做。overflow-clip-margin的含义：overflow-clip-marginCSS属性决定了带有overflow:clip的元素在其边界之外多远可以在被裁剪之前绘制。太复杂了。我们先看一个简单的例子。.box{边距：10px;宽度：200px；高度：100px；border:solid1px;}.hidden{margin:10px;宽度：200px；高度：100px；溢出：隐藏；:200像素;高度：100px；overflow:clip;}.margin{overflow-clip-margin:30px}请点这里预览>>>>乍一看，overflow:clip和overflow:hidden没有任何关系，单独使用时是隐藏的，不同的是使用overflow之后:clip，我们可以设置一个溢出内容裁剪值overflow-clip-margin:30px（必须和overflow:clip一起使用）来控制溢出显示区域。但是我们在官方解释中看到一句话：Theboxisnotascrollcontainer,anddoesnotstartanewformattingcontext。如果你想开始一个新的格式化上下文，你可以使用display:flow-root这样做，这是你的意思，让我们看另一个例子：这是从MDN官网中提取的关于BFC的代码示例.在下面的示例中，我们在div中有一个浮动元素，并对其应用了边框。此div的内容随浮动元素一起浮动。由于浮动的内容比它旁边的内容高，DIV的边框现在贯穿浮动。.box{宽度：400px；背景颜色：rgb（224、206、247）；border:5pxsolidrebeccapurple;}.float{float:left;宽度：200px；高度：150px；1px纯黑色；padding:10px;}显示效果如下：如果我们给父元素框加上overflow:hidden，会自动创建一个新的包含floating的BFC。现在，我们的DIV就变成了布局中的一个迷你布局。任何子元素都会包含在其中，如图：.box{width:400px;背景颜色：rgb（224、206、247）；边框：5px实心rebeccapurple；overflow:hidden;}如果将overflow:hidden替换为overflow:clip，则显示如下图：.box{width:400px;背景颜色：rgb（224、206、247）；边框：5px实心rebeccapurple；overflow:clip;}由于没有创建格式化上下文，所以直接Trim掉多余的部分。如果要显示补全，加一句显示：flow-root。.box{宽度：400px；背景颜色：rgb（224、206、247）；边框：5px实心rebeccapurple；溢出：剪辑；display:flow-root;}点击这里试试>>>>Chrome官网return有一个注意事项：使用overflow:clip可以让你防止框的任何类型的滚动，包括程序化滚动。这意味着该框不被视为滚动容器；它不会启动新的格式化上下文，这比overflow:hidden具有更好的性能。如果需要，您可以通过overflow-x和overflow-y将裁剪应用于单个轴。`overflow:clip在使用时不会创建格式化上下文，所以在性能上，它比overflow:hidden要好。不过，现在90版本刚刚发布，距离这个属性能够被广泛使用还有很长的路要走……参考：https://developer.chrome.com/...https://developer。mozilla.org...
