是溢出：隐藏正确的方法，以确保浮动项目不“泄漏”？

Question

假设您有一个文章列表，其中一些文档具有正确的浮动图像和非常少的文本，因此图像浮动在文章之外并进入下一篇文章，搞砸了。

确保文章内的元素不会漂浮在其外部的正确/首选/最佳方法是什么？

我知道overflow:hidden有效，但这是正确的用法吗？或者它只是碰巧做了我想做的事情？

Answer 1

您有三种方法可以做到：

1. 你可以overflow:hidden这是一种干净的方法。

   • 优点：它不会混淆HTML的语义，没有“死元素”。

   • 缺点：如果容器具有已定义的维度，则剪切内容，并从内部元素剪切阴影。

     div        <-- style="overflow:hidden"
         div    <-- floating children
         div    
     div        <-- style="overflow:hidden"
         div    <-- floating children
         div
     

2. 您可以在具有浮动的容器之后有一个空白元素，通常是<div>。使用clear:both设置此样式。

   • 缺点：在DOM中有一个“死元素”。

     div
         div    <-- floating children
         div 
     div        <-- style="clear:both"
     div 
         div    <-- floating children
         div 
     

3. 您可以在容器中添加“clearfix”类，并使用:after伪类添加“清除动态点/空格”。基本上它就像第二个一样，但使用:after插入一个空格，其中包含“clear：both”This article explains it。

   • 优点：它不会混淆HTML的语义，没有“死元素”。

   • 缺点：“classitis”（过度使用类），:after is not supported in IE7及更早版本，因此使用了CSS hacks

     div        <-- :after
         div    <-- floating children
         div
     " "        <-- style="clear:both"
     div        <-- :after
         div    <-- floating children
         div
     

你可以使用三种中的任何一种，它们效果很好。我通常在大多数时候使用1，如果我在容器中有阴影，或者容器有固定的尺寸，我使用3.方法3依赖于:after这是新的。为了支持这个clearfix，你可以使用文章中描述的旧的CSS hack。

Answer 2

对于每个文章元素，添加clear: both;。这将确保图像不会在下一篇文章中“泄漏”，但也确保它们不会被切断。

Answer 3

This link explains exactly what you asked.

溢出：隐藏或溢出：auto是可接受的解决方案，用于清除较小的包含元素的浮点数，例如保存浮动列表项的导航栏，或具有一堆浮动框的调用操作区域。

该链接还解释了使用溢出的问题：隐藏以通过演示清除。