问题描述
假设我有这个HTML结构：
Suppose I have this HTML structure:
<div class="a">
<div class="floated-left">...</div>
<div class="floated-left">...</div>
</div>
我注意到如果我不设置 overflow：hidden 到 .a ，那么< div class =a> 任何垂直尺寸。例如，如果我将其背景设置为红色，则它根本不可见。检查它与FireBug显示它在那里，但几乎没有垂直尺寸。
I have noticed that if I don't set overflow:hidden to .a, then the <div class="a"> does not occupy any vertical size. For example, if I set its background to red, it is not visible at all. Inspecting it with FireBug shows that it's there but of almost no vertical size.
为了解决这个问题，我发现我必须设置 overflow：hidden 到 .a 。然后，第一个< div> 覆盖其所有内容。
To fix this, I found that I have to set overflow:hidden to .a. Then the first <div> goes over all its content.
这是一个实例：
<html>
<head>
<style>
.a { background-color: red; }
.b { background-color: red; overflow: hidden }
.floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<p>div with class a, that doesn't overflow:hidden:</p>
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
</div>
<div style="clear:both"></div>
<p>div with class b, that does overflow:hidden:</p>
<div class="b">
<div class="floated-left">Hi,</div>
<div class="floated-left">Dad!</div>
</div>
</body>
</html>
请注意妈妈！得到红色背景（没有溢出：隐藏），而你好，爸爸！会得到红色背景（有overflow：hidden）。
Notice how Hi, Mom! does not get red background (no overflow:hidden), while Hi, Dad! does get red background (has overflow:hidden).
任何人都可以解释这个行为吗？
Can anyone explain this behaviour?
下面是示例的屏幕截图：
Here is screenshot of the example:
谢谢，Boda Cydo。
Thanks, Boda Cydo.
推荐答案
当您浮动元素时，它们将从文档流中移出。除此之外，这意味着它们对父元素的尺寸没有影响（尽管其宽度将决定浮动物在水平轴上的位置）。然而，它们会影响兄弟姐妹在容器内的位置，取决于兄弟姐妹是内联或块级元素以及它们是否具有宽度。
When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.
为了使高度的浮动影响容器的高度，你必须有一个元素，在它们之后清除它们。然而，你在这里看到的实际上是CSS标准的一部分，你可以用来清除浮动没有额外的非语义标记。唯一的问题是，这种行为在旧版本的浏览器及其CSS实现中可能略有不同。这种效果存在与溢出自动和溢出隐藏，但不存在与溢出可见。在IE& 6您必须在包含元素上设置一个宽度才能工作。
In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.
这篇关于何时应该溢出：hidden用于< div> ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！