如何保持嵌套的 div 不会“泄漏”到底部？答案

【问题标题】：how do I keep nested div's to not "leak" out the bottom?如何保持嵌套的 div 不会“泄漏”到底部？
【发布时间】：2011-06-22 15:33:44
【问题描述】：

在haml中，我有这样的东西：

#profile
   #photo

   #bio

但是发生的是#photo“泄漏”出#profile div。如果我检查它，#profile 是一个非常小的盒子，#photo 是它的顶峰。

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

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

【问题讨论】：

你能显示或链接到一些代码吗？ #photo 是
还是？

标签： css html css-float haml

【解决方案1】：

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

不需要额外的元素，也没有清除左、右或两者的副作用。

【讨论】：

@Thomas Shields 虽然这是一篇旧文章，但这里有一个很好的概述（虽然没有真正的解释......）：quirksmode.org/css/clearing.html
嗯，好的。根据标准和定义的行为，我试图了解它为什么起作用。
溢出：隐藏是什么意思？我想试试这个，但是当我查看文档时，我不明白它是如何关联的......
@Angela 除非您有任何绝对定位的元素，否则它的唯一作用是提醒框是框。

【解决方案2】：

当你有一个内部有浮动的容器时，你需要某种方式告诉容器清除底部的浮动。

执行此操作的通常方法是在容器末尾的 DOM 中创建一个元素，在所有浮动项之后将其告知clear:left;，同时将其设置为visibility:hidden; （假设您的浮动项目浮动到left，否则使用right 或both 作为clear 值）

你可以用纯 CSS 做到这一点：

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

总是可以选择直接将 HTML 元素添加到容器底部，但我发现纯 CSS 方式更好一点。

【讨论】：

【解决方案3】：

Floated 元素不占用其父容器中的空间。要解决此问题，您需要在这些元素下方添加一些不允许浮动元素浮动的内容。您可以使用CSS property clear 完成此操作。所以在你的情况下，添加：

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

清除那些浮动元素，使其不再延伸。

【讨论】：

【解决方案4】：

也许你应该告诉照片不要超过框限制，自动调整大小：

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

这样照片不会超过 div 大小。可能您还应该将position:relative; 添加到#profile div。

更新

我忘了说明这仅在您的#photo 实际上是图像元素时才有效。

【讨论】：

它适用于图像。你知道#photo 元素实际上是 div 还是图像？
啊哈好吧。您能否在回答中更清楚地说明这一点，我会给您投票：P
完成。我猜现在最好等待更多细节；）
#photo 是一个div，里面嵌套了一个=image_tag

【解决方案5】：

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

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

或者在应用了clear:both;的父div结束标记之前放置一个div元素。

有新的方法，比如在css中使用:after伪类，但是我用那个方法有问题。

【讨论】：

【解决方案6】：

清除 div：

<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>

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

【讨论】：