如何避免嵌套的div元素“溢出”底部？

Question

在Haml中，我有这样的代码：

#profile
   #photo

   #bio

但是问题在于#photo "泄漏"出了#profile div。如果我检查它，#profile是一个非常小的框，而#photo则突出来了。

我给#photo应用了float:left，这样#bio就会坐在照片旁边。

我似乎经常遇到这种情况。发生了什么事？我该如何解决？

- Satchel

---

你能展示或链接一些代码吗？#photo是一个<div>还是一个<img>？ - Jose Faeti

Answer 1

我发现最简单的方法是在容器中添加overflow:hidden，在您的情况下是#profile。

不需要额外的元素，并且不会因为清除左侧、右侧或两者而产生副作用。

- jeroen

---

@Thomas Shields 虽然这是一篇旧文章，但这里有一个很好的概述（虽然没有真正的解释...）：http://www.quirksmode.org/css/clearing.html - jeroen

嗯，好的。我正在努力理解为什么它能够按照标准和定义的行为来工作。 - Thomas Shields

overflow:hidden是什么意思？我想尝试一下，但当我查阅文档时，我不明白它与什么有关系... - Satchel

@Angela，除非你有任何绝对定位的元素，否则它的唯一作用就是提醒盒子保持盒子状态。 - jeroen

Answer 2

当您有一个包含浮动元素的容器时，您需要一种方法告诉容器在底部清除浮动。

通常的做法是在容器的末尾创建一个元素，在所有浮动项之后告诉它 clear:left;，同时将其设置为 visibility:hidden; （假设您的浮动项向 左侧 浮动，否则使用 right 或 both 作为 clear 值）

您可以通过纯CSS来实现此操作：

#container:after{
  content:".";
  display:block;
  clear:left;
  visibility:hidden;
}

总是有一种方法可以直接将HTML元素添加到容器底部，但我认为纯CSS的方式更好。

- Jamie Dixon

Answer 3

浮动元素不会占用其父容器中的空间。为了解决这个问题，您需要在这些元素下方添加一些内容，以防止浮动元素漂移到它们之上。您可以使用CSS属性clear来实现这一点。因此，在您的情况下，添加：

<div style="clear:both"></div>

为了防止浮动元素扩展超过它的范围。

- Thomas Shields

Answer 4

也许你只需要告诉照片不要超出框的限制，自动调整大小：

#photo {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}

这样照片就不会超出div的大小。可能你还需要在#profile div中添加position:relative;。

更新

我忘记说明了，这仅适用于您的#photo实际上是一个图像元素的情况。

- Jose Faeti

---

它是用于图像的。你知道那个#photo元素实际上是一个div还是一个图像吗？ - Jose Faeti

好的。您能否在回答中更清楚地说明一下，我会把您的投票还给您 :P - Thomas Shields

完成。现在我想最好等待更多细节吧 ;) - Jose Faeti

#photo 是一个 div，里面嵌套了 =image_tag。 - Satchel

Answer 5

有几种方法。我倾向于使用旧的方法，例如：

将overflow:auto应用于包装父div。

或者在父div关闭标签之前放置一个div元素，该元素具有应用了clear:both;的样式。

还有新的方法，例如在css中使用:after伪类，但我曾经遇到过这种方法的问题。

- Adam

Answer 6

清除浮动：

<style type="text/css">
    .clear { height: 0px; line-height: 0px; clear:both; font-size:0px; }
</style>


<div class="profile">
     <div class="photo"><img /></div>
     <div class="bio">Lorem ipsum</div>
     <div class="clear"></div>
</div>

应该适用于所有受影响的浏览器。

- Bryan A