css - CSS 溢出属性

Question

我发现了一些 CSS 模板，其中一些类具有 overflow:hidden 属性，但没有定义大小。如果我没记错的话，除非另有说明，否则块元素会拉伸以适应其内容。既然不是这样，我觉得放上overflow:hidden是没有意义的，我可以毫不犹豫地删除它。这是对的还是我错过了什么？

Answer 1

虽然这是该overflow属性的主要用途，但它并不是它对渲染的唯一影响。它的另一个主要影响是设置overflow为（默认）以外visible的任何内容都会导致块框建立自己的块格式化上下文。

这主要用于包含浮动而不需要 clearfix；但这并不是拥有新 BFC 的唯一效果；还有许多其他极端情况在规范的其他地方有更好的描述。另请参阅有关此行为原因的冗长文章（奇怪的是，这与包含浮点数几乎没有关系；实际上最终只不过是一种副作用）。

因此，如果您删除该overflow声明，您可能会破坏浮动布局等。我建议避免这样做，除非绝对必要或者您确定它不会影响布局。

Answer 2

如果该 div 内有浮动子项，则overflow: hidden可能包含它们。

overflow: hidden创建一个新的块格式化上下文，创建新块格式化上下文的元素包含浮点数。

Answer 3

这可能取决于。如果您的 div 包含一些浮动元素，您可以使用

div {
   height: auto;
   overflow : hidden;
}

作为清算的解决方法。所以我不会在没有看到对布局的影响的情况下删除该规则

Answer 4

overflow:hidden如果您有一个指定宽度大于容器最大允许宽度的子元素，则可以派上用场。否则它会拉伸容器。

查看示例

一个常见的用途是在显示带有浮动子元素的轮播时。元素需要显示为内联但隐藏，以便在left更改 CSS 属性时它们可以出现。