假设我有这样的 HTML 结构：
<div class="a"> <div class="floated-left">...</div> <div class="floated-left">...</div> </div>
我注意到如果我不设置overflow:hidden to .a，那么<div class="a">不占据任何垂直尺寸。例如，如果我将其背景设置为红色，则它根本不可见。用 FireBug 检查它表明它在那里，但几乎没有垂直尺寸。
overflow:hidden
.a
<div class="a">
为了解决这个问题，我发现我必须设置overflow:hidden to .a。然后是第一个<div>回顾其所有内容。
<div>
这是一个真实的例子：
<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>
注意如何Hi, Mom!没有得到红色背景（没有溢出：隐藏），而Hi, Dad!确实得到红色背景（有溢出：隐藏）。
Hi, Mom!
Hi, Dad!
谁能解释这种行为？
这是示例的屏幕截图：
谢谢，博达·西多。
当您浮动元素时，它们将从文档流中取出。除此之外，这意味着它们对父元素的尺寸没有影响（尽管其宽度将决定浮动在水平轴上的位置）。然而，它们确实会影响同级元素在容器内的定位，具体取决于这些同级元素是内联元素还是块级元素以及它们是否具有宽度。
为了使浮动的高度影响容器的高度，您必须在它们后面有一个元素来清除它们。然而，您在这里看到的实际上是 CSS 标准的一部分，您可以使用它来清除浮动，而无需额外的非语义标记。唯一的问题是这种行为在旧版浏览器及其 CSS 实现中可能会略有不同。此效果在自动溢出和隐藏溢出时都会出现，但在可见溢出时不会出现。在 IE
