我如何保持嵌套的 div 不“泄漏”出底部吗？
在 haml 中，我有这样的内容：
#profile
#photo
#bio
但是发生的情况是 #photo 从 #profile div 中“泄漏”出来。如果我检查它，#profile 是一个非常小的盒子，#photo 从它的外面突出。
我将 float:left 应用于 #photo，以便 #bio 位于
我似乎经常遇到的照片旁边。这是怎么回事？我该如何解决？
In haml, I have something like this:
#profile
#photo
#bio
But what hapens is the #photo "leaks" out of the #profile div. If I inspect it, #profile is a very small box and #photo peaks out of it.
I applied a float:left to #photo so that #bio will sit next to the photo
I seem to run into this alot. What is going on and how do I fix it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我发现最简单的方法是将
overflow:hidden添加到容器中，在您的情况下为#profile。不需要额外的元素，也不会因清除左侧、右侧或两者而产生副作用。
I find that the easiest way is to add
overflow:hiddento the container,#profilein your case.No extra elements needed and no side-effects from clearing left, right or both.
当您的容器内有浮子时，您需要某种方式告诉容器清除底部的浮子。
通常的方法是在所有浮动项之后在容器末尾的 DOM 中创建一个元素，并告诉它
clear:left;同时将其设置为visibility ：隐藏；（假设您的浮动项目浮动到
left，否则使用right或both作为clear值）可以使用纯 CSS 来做到这一点：
总是可以选择直接将 HTML 元素添加到容器的底部，但是我发现纯 CSS 方式更好一点。
When you have a container with floats inside, you need some way of telling the container to clear the floats at the bottom.
The usual way of doing this is to create an element in the DOM at the end of the container after all of the floating items and tell it to
clear:left;whilst also setting it tovisibility:hidden;(Assuming your floated items are floating to the
left, otherwise userightorbothas theclearvalue)You can do this with pure CSS as:
There's always the option of directly adding a HTML element to the bottom of the container however I find the pure CSS way a tad nicer.
浮动元素不占用其父容器中的空间。要解决此问题，您需要在这些元素下方添加一些内容，不允许浮动元素浮动经过它。您可以使用 CSS 属性
clear来完成此操作。因此，在您的情况下，添加：清除那些浮动元素，使其不超过它。
Floated elements do not take up space in their parent container. To fix this, you need to add something below these elements that do not allow the floated elements to float past it. You can accomplish this with the CSS property
clear. So in your case, add:To clear those floated elements from extending past it.
也许你应该告诉照片不要超过框限制，自动调整大小：
这样照片就不会超过 div 大小。也许您还应该将
position:relative;添加到 #profile div。更新
我忘记指出，只有当您的 #photo 实际上是图像元素时，此功能才有效。
maybe you should just tell the photo not to exceed the box limits, auto resizing:
This way the photo will not exceed the div size. Probably you should also add
position:relative;to the #profile div.Update
I forgot to specify that this works only if your #photo is actually an image element.
有几种方法。我倾向于使用旧的方法，例如：
将
overflow:auto应用于包装父 div。或者将 div 元素放置在应用了
clear:both;的父 div 结束标记之前。有新的方法，例如在css中使用
:after伪类，但我在使用该方法时遇到了问题。There are a couple methods. I tend to use the older methods such:
Apply
overflow:autoto the wrapping parent div.Or placing a div element right before the parent div closing tag that has
clear:both;applied.There are new methods, such as using the
:afterpseudo class in css, but I have had problems with that method.清除 div：
应该适用于所有受影响的浏览器。
Clearing div:
Should work for all browsers affected.