关于css清除浮动的补充
之前写过关于清除浮动的一些方法介绍---（http://www.cnblogs.com/qiwenke/archive/2012/10/07/2714434.html），最近在学习的过程中又翻阅到了不少好的文章---（如http://www.iyunlu.com/view/css-xhtml/55.html）----
因此重头审视之前写的文章的时候，发现漏洞百出。特此加上一篇简单的补充作为自己的学习笔记：
一、仍然以原来代码为例（如下）：
<div class="container"> <div class="block1">子元素1</div> <div class="block2">子元素2</div> </div>
.block1{ width:200px; height:200px; background: #CBA627; float:left; margin-right:10px;} .block2{ width:200px; height:100px; background:#009900; float:left;}
（1）首先，针对之前提到的:after方法（即原样式中添加新样式如下）：
.container:after{ content:" 20"; visibility:hidden; display:block; clear:both; height:0;}
存在两个比较模糊的地方，一个是理解不准确，不深入；另一个则是margin-bottom会引发问题。
关于第一个理解不准确，之前是称".container:after"为伪类，其实应该是伪元素才对。{content:"20";visibility:hidden;height:0;}很明显的表明了这是一个在.container尾部添加的一个内容为20 的元素，且为了不影响父元素内容被隐藏，高度也被设置为0(其实可以理解为在父元素尾部新加了一个高度为0的"<div>20</div>")。{clear:both;display:block;}则为该元素添加了最终要的clear属性，并设置为block。整个样式最后的结果就相当于添加了一个"<div style="clear:both;display:block;height:0">20</div>",.container:after指的就是这个"div"。
关于第二个margin-bottom会引发问题是指，当.container内以浮动子元素结尾，而且浮动子元素具有margin-bottom值时，margin-bottom的数值会在ie6/7/8中失效。解决方法则是取消:after方法，代之以添加空标签（clear:both）的方法。
（2）对于清除浮动的方法总结过于简单，一是不全面，而是不深入。上文中提到的参考文章（http://www.iyunlu.com/view/css-xhtml/55.html），我觉得对于浮动问题的讲解比较深入，而且对方法的整理和分类也比较合理。尤其是将方法归类为“清除”和“闭合”。
清除：主要是指通过添加空元素（并保证该元素display:block;clear:both;）来实现。其实通过对.container:after的解释可以看出，该方法本质上仍然是添加元素来清除浮动。
闭合：是指，不添加额外的元素或内容，通过设置父元素来实现。有一种方法，之前的文章已经提到，即.container{overflow:hidden;zoom:1}，但是参考文章还提到了是给父元素添加display:table的方法和添加overf:auto的方法。
综上，如果用例子来表示分类及分类中的方法的话应该如下所示(以html文档和css为基础)：
清除类方法：1.添加空标签：<div class="clear"></div> .clear{ clear:both;}
或者<br class="clear"/> .clear{ clear:both;}
2.使用:after伪元素：.container:after{ content:".";visibility:hidden;height:0; display:block;clear:hidden;} .container{zoom:1}(为了兼容ie6)
闭合类方法：1.使用overflow：.container{ overflow:hidden;zoom:1;}
或者.container{ overflow:auto;zoom:1;}
2.使用display： .container{ display:table;}
此外，还有一种方法没有把它归类到任何一类，即：给父元素添加浮动的方法---如：.container{ float:left;}。因为该方法在文档结构比较复杂的时候会对文档产生极坏的影响，因此是最不推荐的一个，忽略之。
二、
方法多，自然就要权衡比较一下，采取最优方案。其实，着眼于两个“类”的时候，优劣势就会显得比较明显。
清除类方法 优势：比较简单，便于掌握使用。劣势：会在文档中添加无意义的标签元素。
闭合类方法 优势：不对原文档的html结构产生影响，书写也比较简单。劣势：要考虑到兼容，而且该类中的方法都会对父元素的样式或文档表现产生影响。
因此，实际上闭合类的方法相对而言，是不推荐使用的。反过来再看清除类方法中的伪元素方法，它既没有添加多余的东西，也没有改变父元素的display或者overflow而对其产生未知的影响，只是需要用到zoom来兼容一下。因此，该方法应该算是比较好的解决方法，推荐使用。本文中使用的伪元素方法的写法是比较常见的一种。在文中提到的参考文章中，对该方法又进行了优化，可以参考一下。
三、
要注意的是，上文中关于zoom提到了haslayout这一ie特有的概念。实际上，解决浮动的第二类方法都是和这一概念有关的，而且关于ie6的很多bug也是因为这个layout而产生的。
详细的了解一下haslayout会让你对于ie的一系列问题尤其是ie6bug会有更深的理解和更多的解决方法。
关于haslayout参考文章：
http://www.cnblogs.com/qiwenke/articles/2714559.html
