解决方案1:

最可靠和不引人注目的方法似乎是:

演示:http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

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

通过一点CSS目标，您甚至不需要向父DIV添加类。

这个解决方案向后兼容IE8，所以你不需要担心旧的浏览器失败。

解决方案2:

有人建议对解决办法1进行调整，具体如下:

演示:http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

该解决方案似乎向后兼容IE5.5，但未经测试。

解决方案3:

也可以设置display: inline-block;宽度:100%;在不折叠的情况下模拟一个正常的块元素。

演示:http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

该解决方案应该向后兼容IE5.5，但只在IE6中进行了测试。

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

大概是这样的……

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

你把它放在你的样式表中，你所需要做的就是将类'cf'添加到包含浮点数的元素中。

我用的是尼古拉斯·加拉格尔的另一个变体。

它做同样的事情，但它更短，看起来更整洁，可能用来完成另一件非常有用的事情——防止子元素的边缘与它的父元素的边缘一起崩溃(但为此你确实需要其他东西-阅读更多关于它的信息，请点击http://nicolasgallagher.com/micro-clearfix-hack/)。

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

我通常使用overflow: auto trick;虽然严格地说，这不是overflow的预期用途，但它有点相关——当然，这足以让它容易记住。float: left本身的含义已经扩展到各种用途，在这个例子中，比overflow更重要。

与其把overflow:auto放在父对象上，不如把overflow:hidden放在父对象上

我为任何网页写的第一个CSS总是:

div {
  overflow:hidden;
}

那我就再也不用担心了。

当一个被浮动的元素在一个容器盒子里时，这个问题就发生了，这个元素不会自动强迫容器的高度调整到被浮动的元素。当一个元素被浮动时，它的父元素将不再包含它，因为浮动已从流中移除。你可以使用两种方法来修复它:

{clear: both;｝ clearfix

一旦你理解了发生了什么，使用下面的方法来“清除”它。

.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%;
}

示范:)

Another possible solution which I think is more semantically correct is to change the floated inner elements to be 'display: inline'. This example and what I was working on when I came across this page both use floated divs in much exactly the same way that a span would be used. Instead of using divs, switch to span, or if you are using another element which is by default 'display: block' instead of 'display: inline' then change it to be 'display: inline'. I believe this is the 100% semantically correct solution.

解决方案1，浮动父文件，本质上是将整个文档更改为浮动文件。

解决方案2，设置一个显式的高度，就像画一个框，然后说我想在这里放一张图片，也就是说，如果你在做一个img标签，就使用这个。

解决方案3，添加一个间隔来清除浮动，就像在你的内容下面添加一个额外的行，也会混淆周围的元素。如果你使用这种方法，你可能想把div的高度设置为:0px。

解决方案4,overflow: auto，是承认您不知道如何布局文档，并且您承认您不知道该做什么。