清除浮动技巧总结

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

2）使用 br标签和其自身的 html属性
这种方法有些小众，br 有 clear=“all | left | right | none” 属性

3)父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还须要触发 hasLayout ，比如 zoom：1；

4)父元素设置 overflow：auto 属性
相同IE6须要触发hasLayout，演示和3差点儿相同
长处：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动栏等，firefox早期版本号会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用

5）父元素也设置浮动
长处：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

6）父元素设置display:table
长处：结构语义化全然正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

7）使用:after 伪元素
须要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手冊里面称之为“伪对象”），非常多清除浮动大全之类的文章都称之为伪类，只是csser要严谨一点，这是一种态度。
因为IE6-7不支持:after，使用 zoom:1触发 hasLayout。

原文所有代码例如以下:

小结
通过对照，我们不难发现，事实上以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾加入一个空元素，设置 clear：both属性，after伪元素事实上也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。


在CSS2.1里面有一个非常重要的概念，可是国内的技术博客介绍到的比較少，那就是Block formatting contexts（块级格式化上下文），下面简称 BFC。
CSS3里面对这个规范做了修改，称之为：flow root，而且对触发条件进行了进一步说明。

那么怎样触发BFC呢？

• float 除了none以外的值
• overflow 除了visible 以外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block)
• position（absolute，fixed）
• fieldset元素
  

• position: absolute
• float: left|right
• display: inline-block
• width: 除 “auto” 外的随意值
• height: 除 “auto” 外的随意值 （比如非常多人清除浮动会用到 height: 1%  ）
• zoom: 除 “normal” 外的随意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
• writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp
  

• overflow: hidden|scroll|auto （ 这个属性在IE之前版本号中没有触发 layout 的功能。 ）
• overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前IE版本号中相同没有触发 layout 的功能）