很多人都已经习惯称之为清除浮动，但是确切地来说是不准确的。
1> 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2> 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。
通过上图实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。
故：用闭合浮动比清除浮动更加严谨，所以应准确称之为：闭合浮动。
清理浮动的方式有很多，总结如下——
1> 添加额外标签(如<div style="clear: both;"></div>) 2> 使用 br标签和其自身的 html属性(如<br clear="all">) 3> 父元素设置 overflow：hidden;(或overflow：auto;)及_zoom: 1; 4> 父元素也设置浮动 5> 父元素设置display:table 6> 父元素使用:after 伪元素
这六种方式方式各有优缺点，在此就不在说明，相对而言，第6种方式(即after伪元素闭合浮动)无疑是比较好的解决方案了，它的实现代码如下——
1 /* For modern browsers */ 2 .clearfix:after { 3 content: "."; /* 这里的content内容是任意的 */ 4 display: block; /* 使生成的元素以块级元素显示,占满剩余空间 */ 5 height: 0; /* 避免生成内容破坏原有布局的高度 */ 6 visibility: hidden; /* 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互 */ 7 clear: both; /* 此行代码才真正做了浮动清除，其他代码无非都是为了隐藏掉content生成的内容 */ 8 } 9 /* For IE6/IE7 */ 10 .clearfix { 11 /* 触发IE6/IE7的布局：可以包含内部浮动的元素 */ 12 *zoom: 1; 13 /* 当然还有其他触发IE6/IE7的布局的方式 */ 14 /* 比较推荐：*display: inline-block; */ 15 } 16 .clearfix { 17 /* 如果触发IE6/IE7布局的方式用的是display: inline-block;的方式，那么可千万别忘了加了这句代码 */ 18 display: block; 19 /* 一般闭合浮动均已块级元素呈现，故建议，不管是否用的display: inline-block;的方式触发IE6/IE7的布局，均把这句代码加上 */ 20 }
精益求精方案一——
1 /* For modern browsers */ 2 .clearfix:after { 3 content: "\200B"; /* Unicode字符里有一个"零宽度空格"，即U+200B，此时可以省略掉 visibility:hidden了 */ 4 display: block; 5 height: 0; 6 clear: both; 7 } 8 /* For IE6/IE7 */ 9 .clearfix { 10 *zoom: 1; 11 } 12 /* 块级呈现 */ 13 .clearfix { 14 display: block; 15 }
精益求精方案二——
1 /* For modern browsers */ 2 .clearfix:before, 3 .clearfix:after { 4 content:""; 5 display:table; 6 } 7 .clearfix:after { 8 clear:both; 9 } 10 /* For IE6/IE7 */ 11 .clearfix { 12 zoom:1; 13 } 14 /* 块级显示 */ 15 .clearfix { 16 display: block; 17 }