我认为最好的方法是设置clear:both即将到来的元素。

原因如下：

1）:afterIE6 / 7不支持选择器，而FF3不支持选择器，但是，
     如果您只关心IE8 +和FF3.5 +的清除，：after可能最适合您...

2）overflow应该做其他事情，因此这种破解不够可靠。

致作者的注意：清除没有任何技巧...清除意味着跳过浮动字段。自从有了HTML3（知道，甚至可能更长）以来，CLEAR就在我们这里。http: //www.w3.org/MarkUp/html3/deflists.html，也许他们应该选择与page类似的名称：new，但这仅是一个细节...

通过将溢出更改为auto或hidden，可能会发现的主要问题是，使用鼠标中键可以使所有内容滚动，并且用户可以弄乱整个网站布局。

我最喜欢的方法是使用clearfix类作为父元素

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

我认为在语义上更正确的另一种可能的解决方案是将浮动的内部元素更改为“ display：inline”。这个示例以及我在浏览此页面时正在做的工作都使用浮动div，其使用方式与使用span的方式完全相同。代替使用div，切换到span，或者如果您使用的是默认为“ display：block”而不是“ display：inline”的其他元素，则将其更改为“ display：inline”。我相信这是100％正确的语义解决方案。

解决方案1，浮动父级，本质上是更改要浮动的整个文档。

解决方案2，设置一个明确的高度，就像画一个盒子，说我想在这里放一张图片，也就是说，如果您正在做img标签，请使用它。

解决方案3，添加间隔符以清除浮动，就像在内容下方添加多余的线条，并且也会与周围的元素造成混乱。如果使用这种方法，则可能要将div设置为height：0px。

解决方案4：溢出：自动，表示您不知道如何布置文档，并且您承认自己不知道该怎么办。

将此添加到底部的父div中

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

最知名的解决方案之一是您的解决方案编号3的变体，它使用伪元素而不是非语义html元素。

像这样...

.cf:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

您将其放置在样式表中，所需要做的就是将类“ cf”添加到包含浮点数的元素中。

我使用的是Nicolas Gallagher的另一个变体。

它具有相同的功能，但更短，看起来更整洁，并且可能用于完成另一项非常有用的操作-防止子元素的边距与父元素的边距倒塌（但是为此，您还需要其他内容-了解更多信息）此处http://nicolasgallagher.com/micro-clearfix-hack/）。

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

我在适用的地方使用2和4（例如，当我知道内容的高度或溢出不会造成危害时）。在任何其他地方，我都使用解决方案3。顺便说一句，您的第一个解决方案没有优于3（我可以发现）的优势，因为它不再使用任何语义，因为它使用了相同的伪元素。

顺便说一句，我不会担心第四个解决方案是hack。CSS中的hack仅在其基本行为受到重新解释或其他更改时才是有害的。这样，您的骇客就无法保证正常工作。但是，在这种情况下，您的骇客依赖于本overflow: auto应具有的确切行为。搭便车没有害处。

尽管代码不是完全语义化的，但我认为在每个包含浮点数的容器的底部都放一个我所谓的“清除div”更为简单。实际上，我在每个项目的重置块中都包含以下样式规则：

.clear 
{
   clear: both;
}

如果您要为IE6设置样式（上帝帮助您），则可能还希望将此规则的行高和高度设为0px。

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

• { clear: both; }
• clearfix

Once you understand what is happening, use the method below to “clearfix” it.

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Demonstration :)

理想的解决方案是使用inline-block列而不是浮动。如果您遵循（a）inline-block仅适用于通常内联的元素（例如span），我认为浏览器支持会很好。（b）-moz-inline-box为Firefox 添加。

还要在FF2中检查您的页面，因为在嵌套某些元素时我遇到了很多问题（令人惊讶的是，这是IE性能比FF好得多的一种情况）。

该clearfix有多个版本，主要作者是Nicolas Gallagher和Thierry Koblentz。

如果您想支持较旧的浏览器，最好使用以下clearfix：

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

在SCSS中，您应该使用以下技术：

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

如果您不关心对旧版浏览器的支持，则可以使用以下较短的版本：

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

而不是放overflow:auto父母，放overflow:hidden

我为任何网页编写的第一个CSS始终是：

div {
  overflow:hidden;
}

那我就不用担心了。

我通常会用这个overflow: auto把戏。虽然这不是严格来说，溢出的用途，它是有点关系-足以令它容易记住，一定。float: left在本示例中，IMO 的含义已被广泛地扩展为多种用途。