Question

在haml中，我有类似的东西：

#profile
   #photo

   #bio

但是#photo div中的#profile“泄漏”是什么。如果我检查它，#profile是一个非常小的框，并且#photo出现了峰值。

我将float:left应用于#photo，以便#bio位于照片旁边

我似乎碰到了很多。发生了什么，我该如何解决？

Answer 1

我发现最简单的方法是在您的案例中将overflow:hidden添加到容器#profile。

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

Answer 2

如果你的容器里面有浮子，你需要某种方法告诉容器清除底部的浮子。

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

您可以使用纯CSS执行此操作：

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

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

Answer 3

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

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

清除那些浮动的元素，使其超越它。

Answer 4

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

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

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

<强>更新

我忘了指定仅当#photo实际上是图像元素时才有效。

Answer 5

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

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

或者将div元素放在已应用clear:both;的父div结束标记之前。

有一些新方法，例如在css中使用:after伪类，但我遇到了该方法的问题。

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

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

如何让嵌套的div不会“泄漏”到底部？

6 个答案: