1

谁能解释一下这overflow:hidden实际上是做什么的？尽管阅读了许多 CSS 教程，但我无法理解这个概念。我有两个花车，一个在右边，另一个在左边，我为什么要申请overflow:hidden我的标题？

我对这个属性感到困惑。

4

4 回答 4

3

overflow: hidden在容器上简单地隐藏任何在盒子外流动的内容，如下图所示（由 Chris Coyier/CSS-Tricks 提供）：

http://css-tricks.com/the-css-overflow-property/

在这种情况下，您可能会使用overflow: hidden一种 clearfix，这只是一种让父容器扩展到其浮动子级高度的方法（因为浮动元素被从正常的页面流中取出）。在下面的演示中可以看到usingoverflow: hidden和on 具有浮动子项的容器之间的区别。overflow: visible

于 2013-10-20T09:36:23.363 回答
1

可以有 5 个值overflow。它们是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

于 2013-10-20T09:38:47.353 回答
1

如果你的元素的内容比容器大，它通常会改变容器的大小。溢出：隐藏只是告诉它隐藏任何不适合容器的内容，因此容器保持相同的大小。

于 2013-10-20T09:35:00.147 回答
1

overflow: hidden从来没有打算直接影响浮动——正如这里的其他答案所示，它的主要目的是控制内容溢出，换句话说，完全按照它在锡上所说的去做——但它有一个模糊的副作用，即导致容器产生它的自己的块格式化上下文。当这种情况发生时，容器必须扩展以包含它的浮动，即使浮动通常被从正常流动中取出。这通常不会在 CSS 教程中提及，因为它不完全是该overflow属性的预期用途。

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

另请参阅：为什么溢出：隐藏具有意外的副作用，即高度增长以包含浮动元素？

于 2013-10-20T09:41:00.957 回答