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

【问题标题】：When should overflow:hidden be used for a <div>?什么时候应该溢出：隐藏用于 <div>？
【发布时间】：2011-12-08 07:44:15
【问题描述】：

假设我有这个 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! 确实获得了红色背景（有溢出：隐藏）。

谁能解释这种行为？

这里是例子的截图：

谢谢，博达·赛多。

【问题讨论】：

标签： html css

【解决方案1】：

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

为了使浮动的高度影响容器的高度，您必须在它们之后有一个元素来清除它们。但是，您在这里看到的实际上是 CSS 标准的一部分，您可以使用它来清除浮动，而无需额外的非语义标记。唯一的问题是这种行为在旧浏览器及其 css 实现中可能略有不同。此效果在溢出自动和溢出隐藏时存在，但在溢出可见时不存在。在 IE

【讨论】：

【解决方案2】：

Hi, Mom 没有得到任何背景，因为背景来自a div，高度为 0（或接近 0）。内部 div 实际上溢出了它的边界（这是默认情况下浮动所做的）。

浮动要记住的是它们没有固有的高度（当涉及到布局和确定父级的高度时）。内联内容只是围绕它们流动。所以没有overflow: hidden，父 div 没有高度。没有高度意味着没有背景。浮动仍然被渲染，但它们超出了父 div 的范围，即浮动中的内容在父 div 之外。

【讨论】：

【解决方案3】：

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

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

之后会清除，并使外部 div 具有垂直高度。在.a 上设置border: solid 1px red; 以查看实际情况。

仅使用 CSS 的替代解决方案：

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

【讨论】：

我真的不知道为什么有人会使用那个 clearfix 解决方案（最后一个）。与overflow: hidden 相比，它受到的支持更少，而且更加晦涩。
@cletus：所有当前的浏览器都支持它，而且标记更少……只是你的受众是什么以及你更喜欢哪种（html/css）。
@cletus：实际上它的某些版本同时用于蓝图和 960gs。虽然我认为他们正在转向他偶然发现的解决方案。
@Nick：它的标记比父级上的overflow: hidden 少吗？
@cletus：我的意思是比任何 html 都少标记...但是overflow:hidden 并不总是有效，在某些情况下，如果孩子足够大，您将获得滚动条...取决于当然是这种情况，但overlow:hidden 在 100% 的情况下不是有效的解决方案（最常见的是，如果宽度溢出）。

【解决方案4】：

根据 CSS 基本盒子模型的规范：

浮动框的边距不与任何其他边距一起折叠。带有“溢出”其他框的边距比“可见”不折叠其孩子的边距。

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

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

【讨论】：