清除浮动的三种方法

以上方法3是目前最为推荐的

font-size:0;line-height：0也是清除浮动的常用方法

强制标签在一行可以设置为弹性盒模型display:flex;

清除浮动 or 闭合浮动（Enclosing float or Clearing float）？

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

<div class="wrap" id="float1">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

清除浮动：wrap内部设置了浮动，wrap外的.footer未解决受浮动影响而自身进行clear：both，但是wrap高度未被撑起

闭合浮动：wrap内部设置了浮动，防止wrap外其他元素受影响，而自身或内部解决浮动问题。

如上，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决wrap高度塌陷的问题。

闭合浮动方法：（以上说的三种也是闭合浮动）

1）添加额外标签（以上方法1）

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。

2）使用 br标签和其自身的 html属性

这个方法有些小众，br 有 clear=“all | left | right | none” 属性，即把1）中添加的无意义标签换成<br clear="all" />

优点：比空标签方式语义稍强，代码量较少

缺点：同样有违结构与表现的分离，不推荐使用

3） 父元素设置 overflow：hidden

在IE6中还需要触发 hasLayout ，例如 zoom：1；即为.warp添加样式style="overflow:hidden; *zoom:1;"

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

4） 父元素设置 overflow：auto 属性

同样IE6需要触发hasLayout，演示和3差不多

优点：不存在结构和语义化问题，代码量极少

缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 不要使用
5） 父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
6） 父元素设置display:table
优点：结构语义化完全正确，代码量极少

缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

7） 使用:after 伪元素

注  :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

以上总结：通过对比，不难发现，其实以上列举的方法，无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动（原理：Block formatting contexts 块级格式化上下文，只要能触发BFC的都可以解决浮动问题）

目前解决浮动最推荐的就是方法7），讲解如下：

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

5）zoom：1 触发IE hasLayout。

参考：http://www.iyunlu.com/view/css-xhtml/55.html