之前写过关于清除浮动的一些方法介绍---（），最近在学习的过程中又翻阅到了不少好的文章---（如）----

因此重头审视之前写的文章的时候，发现漏洞百出。特此加上一篇简单的补充作为自己的学习笔记：

一、仍然以原来代码为例（如下）：

     
     
      
       子元素1
      
     
      
       子元素2
      
 
     

.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）对于清除浮动的方法总结过于简单，一是不全面，而是不深入。上文中提到的参考文章（），我觉得对于浮动问题的讲解比较深入，而且对方法的整理和分类也比较合理。尤其是将方法归类为“清除”和“闭合”。

清除：主要是指通过添加空元素（并保证该元素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参考文章：