Question

我发现了一些CSS模板，其中一些类具有overflow：hidden属性，但没有定义大小。如果我没记错的话，除非另有说明，否则块元素会拉伸以适合其内容。由于情况并非如此，我觉得把溢出：隐藏是没有意义的，我可以毫不犹豫地删除它。这是对的还是我错过了什么？

Answer 1

虽然这是overflow属性的主要目的，但它并不是它对渲染的唯一影响。它的另一个主要影响是将overflow设置为visible以外的任何值（默认值）会导致块框建立自己的block formatting context。

这主要用于包含浮点数而不需要clearfix;然而，这不是拥有新BFC的唯一影响;还有一些其他角落案例在规范的其他地方有更好的描述。另请参阅this lengthy write-up关于此行为的原因（奇怪的是，这与包含浮点数几乎没有关系;实际上最终只是副作用）。

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

Answer 2

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

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

Answer 3

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

div {
   height: auto;
   overflow : hidden;
}

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

Answer 4

如果您指定的宽度超过容器的最大允许宽度的子元素，则

overflow:hidden可以派上用场。否则会拉伸容器。

这种情况的一个常见用途是显示带有浮动子元素的carousel。元素需要显示为内联，但隐藏，以便在更改left CSS属性时它们可以进入视觉状态。