溢出：隐藏在CSS中

Question

任何人都可以解释一下overflow:hidden实际上做了什么吗？虽然阅读了许多CSS教程，但我无法理解这个概念。我右边和左边有两个花车，我为什么要将overflow:hidden应用到我的标题？

我对这个属性感到困惑。

Answer 1

容器上的

overflow: hidden只是隐藏任何流出框外的内容，如下图所示（Chris Coyier / CSS-Tricks提供）：

在这种情况下，您可能正在使用overflow: hidden作为一种clearfix，这只是一种让父容器扩展到其浮动子节点高度的方法（因为浮动元素被取出了正常情况）页面流程）。在following demo上可以看到在有浮动孩子的容器上使用overflow: hidden和overflow: visible之间的区别。

Answer 2

如果元素的内容大于容器，则通常会更改容器的大小。 overflow：hidden只是告诉它隐藏容器中不适合的内容，因此容器保持相同的大小。

Answer 3

overflow可以有5个值。它们是visible，hidden，scroll，auto和inherit。通过使用overflow:hidden，您强制内容适合指定的维度而不使用滚动条。因此，只有符合维度的内容才会显示，其余内容隐藏。

也许这个演示会帮助您直观地看到差异：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

来源： http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 4

overflow: hidden从来没有打算直接影响浮动 - 正如其他答案所示，其主要目的是控制内容溢出，换句话说就是完全按照它在锡上所说的那样 - 但它有一个不起眼的一面导致容器生成自己的block formatting context的效果。当发生这种情况时，the container must expand to contain its floats，即使漂浮物通常被取出正常流量。这在CSS教程中通常没有提及，因为它并不是overflow属性的预期用途。

请注意，这与清除浮动不同，因为您正在修改容器本身而不引入一些清除元素（这是一个典型的clearfix）。

另请参阅：Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?