logo标签列表

何时应该对<div>使用overflow:hidden？

htmlcss
3
假设我有以下HTML结构：
<div class="a">
 <div class="floated-left">...</div>
 <div class="floated-left">...</div>
</div>

我注意到如果我不把.a的overflow:hidden设置好，那么<div class="a">不会占据任何垂直空间。例如，如果我将其背景设置为红色，它根本不可见。使用FireBug检查它会显示它存在，但几乎没有垂直大小。
为了解决这个问题，我发现必须将.a的overflow:hidden设置好。然后第一个<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! 没有红色背景（没有溢出:hidden），而Hi, Dad! 有红色背景（有溢出:hidden）。
有人能解释一下这种行为吗？
这里是示例的屏幕截图：
感谢，Boda Cydo。
4个回答
3
当您浮动元素时，它们会被从文档流中取出。这意味着它们对父元素的尺寸没有影响（尽管其宽度将决定浮动元素在水平轴上的位置），但它们确实会影响容器内兄弟元素的定位，这取决于这些兄弟元素是内联元素还是块级元素以及它们是否具有宽度。
为了使浮动元素的高度影响容器的高度，必须在它们后面添加一个清除浮动的元素。然而，您在此处看到的实际上是CSS标准的一部分，您可以使用它来清除浮动而无需额外的非语义标记。唯一的问题是，这种行为在旧版浏览器和它们的CSS实现中可能略有不同。这种效果在overflow auto和overflow hidden下都存在，但在overflow visible下不存在。在IE＜6中，必须为包含元素设置宽度才能使其正常工作。
1

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

记住浮动的一件事情就是它们没有固有的高度（当涉及到布局和确定父元素的高度时）。内联内容只是围绕它们流动。所以没有 overflow: hidden 父 div 就没有高度。没有高度意味着没有背景。浮动仍然被渲染，但它们超出了父 div 的边界，即浮动中的内容位于父 div 的外面。

0

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

<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;
}
1
我真的不知道为什么有人会使用那个clearfix解决方案（last）。它比overflow:hidden的支持度还要低，而且更加晦涩难懂。 - cletus
@cletus：它在每个现代浏览器中都得到支持，而且标记较少...只是取决于你的受众和你更熟悉哪种（HTML/CSS）。 - Nick Craver
@cletus：实际上，它的某些版本在蓝图和960gs中都有使用。虽然我认为他们正在转向他偶然发现的解决方案。 - prodigitalson
@Nick：父元素使用overflow: hidden相比之下，它的标记少了吗？ - cletus
@cletus：我的意思是比任何HTML都少的标记……但overflow:hidden并不总是有效，如果子元素足够大，则在某些情况下会出现滚动条……当然这取决于情况，但是overflow:hidden并不是100％的有效解决方法（最常见的是，如果宽度溢出）。 - Nick Craver
@nick：然而在当前的浏览器中，你可以使用overflow-x和overflow-y分别设置每个轴的溢出。 - prodigitalson
0

根据CSS基本框模型规范：

浮动框的边距不会与任何其他边距合并。具有“overflow”属性（非“visible”）的框的边距不会与其子元素的边距合并。

通过显式地提供“overflow”属性，您已允许子元素适应此模型，因此b div不再附加到其子元素的边界。如果应用visible或inherit（b的父级默认为visible），则边界将返回，并且子div定义边距。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接