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