Question

假设我有这个HTML结构：

<div class="a">
 <div class="floated-left">...</div>
 <div class="floated-left">...</div>
</div>

我注意到如果我没有将overflow:hidden设置为.a，则<div class="a">不会占用任何垂直尺寸。例如，如果我将其背景设置为红色，则根本不可见。用FireBug检查它显示它在那里，但几乎没有垂直尺寸。

要解决此问题，我发现必须将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!确实获得红色背景（溢出：隐藏）。

任何人都可以解释这种行为吗？

以下是该示例的屏幕截图：

谢谢，Boda Cydo。

Answer 1

当您浮动元素时，它们将从文档流中取出。除此之外，这意味着它们对父元素的尺寸没有影响（尽管它的宽度将决定浮动在水平轴上的位置）。然而，它们会影响兄弟姐妹在容器内的定位，具体取决于这些兄弟姐妹是否是内联或块级元素，以及它们是否有宽度。

为了使浮动物的高度影响容器的高度，必须在它们之后放置一个清除它们的元素。但是，您在这里看到的实际上是CSS标准的一部分，您可以使用它来清除浮点数而无需额外的非语义标记。唯一的问题是这种行为在旧浏览器及其css实现中可能略有不同。溢出自动和溢出隐藏都会出现此效果，但不会出现溢出可见。在IE＆lt; 6您必须在包含元素上设置宽度才能使其正常工作。

Answer 2

浮动元素不占用任何垂直空间来清除，有几种方法可以解决这个问题，例如：

<div class="a">
  <div class="floated-left">Hi,</div>
  <div class="floated-left">Mom!</div>
  <br style="clear: left;" />
</div>

之后会清除，并使外部div具有垂直高度。在border: solid 1px red;上设置.a即可查看此操作。

替代CSS唯一解决方案：

.a:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Answer 3

浮动元素不占用任何垂直空间来清除，有几种方法可以解决这个问题，例如：

<div class="a">
  <div class="floated-left">Hi,</div>
  <div class="floated-left">Mom!</div>
  <br style="clear: left;" />
</div>

之后会清除，并使外部div具有垂直高度。在border: solid 1px red;上设置.a即可查看此操作。

替代CSS唯一解决方案：

.a:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Answer 4

根据CSS基本框模型的规范：

浮动箱子的边距不会任何其他边缘崩溃。一个盒子的边缘有'溢出'其他比'可见'不要崩溃它的孩子的边缘。

通过明确地提供“溢出”属性，您已允许子项适合此模型，因此b div不再具有附加到其子项的边界。如果应用visible或inherit（默认情况下b的父级是可见的），则返回边界，子div定义边距。

http://www.w3.org/TR/css3-box/（RE：例X）

什么时候应该溢出：隐藏用于<div>？</div>

4 个答案: