CSS溢出属性

Question

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

Answer 1

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

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

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

Answer 2

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

div { 
    height: auto; 
    overflow : hidden; 
} 

作为清算的解决方法。所以我不会删除该规则，而不在布局上看到效果

Answer 3

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

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

Answer 4

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

See example

一个常见用途是显示carousel时，与液浮子元素。元素需要内联显示，但隐藏起来，以便在更改left CSS属性时可以进入视觉。