最近在总结一些以前了解的知识，对于css来说，清除浮动是一个知识点。

　　那我们来看看浮动是什么。当然我们要先提一提常规文档流（额，这里主要参考《CSS权威指南》，但书中没解释常规文档流，那就我自己按理解来解释一下了）。

　　常规文档流（normal flow）：就是除去浮动元素（float）、绝对定位（position：absolute）后的所有元素，按照它们在html文档中出现的顺序及其自身的属性（块级元素，行内元素等）生成的排版。

　　浮动的特点：好吧，就是有了float属性的元素会脱离常规文档流，尽量的跑到父元素的顶部，据说CSS设计float属性的主要目的，是为了实现文本绕排图片的效果，然而，这个属性居然也成了创建多栏布局最简单的方式（@《CSS权威指南》）；并且，既然浮动元素脱离了文档流，其父元素也就看不到它了，因而也不会包围它，导致父元素盒模型不能被撑开，这样就会造成许多布局上的问题。

　　好了，既然已经了解了什么是浮动，那我们就来说一下三种清除浮动的方法：

　　1.子元素计算高度，为父元素设定高度，适合一些高度固定的地方（。。。这个方法还是不要用了，实在是不太实用）。

　　2.这个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden，以强制它包围浮动元素（触发BFC，BFC这个概念先不说了，当然这个方法也会有一些副作用，比如导致内容被隐藏掉等等一些bug，不推荐使用）。

　　3.让父元素也浮动起来，即设置float属性（同样也是触发BFC，这个，我们总不能一直浮动下去吧，当然有时候还是挺适合的，看情况使用了）。

　　4.给父元素的最后添加一个非浮动的子元素，然后清除该子元素，一般也有两种方式实现它：

　　a.在父元素标记中的最后添加一个子元素，并给它应用clear属性，e.g.

      　　
     
      　　　　
      
              　　我是浮动元素　　　　
       
        　　　　
        
         　　
         
        
       
      
     

　　这样，浮动的元素被父元素包围住了，但会添加一个纯表现性元素，显得不太符合语义化的要求，当然，还有更好的b方法。

　　b.直接给父元素添加一个类，给它加上一点点修饰，e.g.

      　　
     
      　　　　
      
       　　　　　　我是浮动元素　　　　
       
        　　
        
       
      
     

　　像这样给父元素的最后加上一个伪元素：一个很小的句点，作为非浮动元素，同时设置其height，visibility属性确保它在页面上不可见，然后clear:both使得它可以清除左、右两边的浮动元素。

　　好了，关于浮动先说到这。

---

　　分割线来了，昨天只是说了一半，我们提到了一个名词——BFC，还没有解释和了解，对于这个概念，我也看了不少的文章来了解，那现在就来说一下（可能会引用我看过的其他文章的语句，还请见谅了）。

　　先直译一下BFC（Block Formatting Context）：块级-格式化-上下文，很不直观对不对，简单说就是，页面中触发了某些特定条件的块级元素（display属性为block，list-item，table的元素）所拥有的一套渲染规则，其规定了自身子元素如何定位，以及如何与自身相邻元素相互作用和排布，而且在这个环境里面的子元素是不受外界影响的，反之亦然，同时它还是属于文档中的普通流(normal flow)。

　　如何形成BFC

　　1.根元素

　　2.float属性不为none

　　3.position属性为absolute或fixed

　　4.display属性为inline-block，table-cell，table-caption等

　　5.overflow属性不为visible

　　BFC的一些特性

　　1.BFC会阻止外边距叠加

　　当两个相邻的块框在同一个BFC中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于BFC，那么它们的外边距就不会叠加。

　　e.g.

         
HaHa
    
HeHe
    

　　效果：

　　

　　两个p之间的外边距为100px，发送了margin重叠。

　　根据规则：当两个相邻的块框在同一个BFC中时，它们之间垂直方向的外边距会发生叠加，但如果这两个相邻的块框不属于BFC，那么它们的外边距就不会叠加。

　　我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个p便不属于同一个BFC，就不会发生margin重叠了。

         
HaHa
    
     
        
      
HeHe
        
     

　　效果:

　　

　　这样它们间的距离就为200px了。

　　2.BFC不会重叠浮动元素

　　3.BFC可以包含浮动

　　这样我们上面清除浮动方法中的2（使overflow属性不为auto）和3（设置float属性不为none）方法应该叫做包含浮动更合适一些，因为它们都是让父元素触发BFC，使之可以包含浮动元素。

　　好吧，说了这么多，我们再来谈谈如何清除（包含）浮动。

　　上面说了4.b的方法是最佳的方法，但还有一点点的问题，因为它应用了伪元素，而IE6、7并不支持，所以对于IE6、7，我们要触发它的BFC；。。。但它们没有BFC，没关系，对于低版本的IE，还有一个属性hasLayout，触发它的效果与BFC是几乎一样的，那怎么触发它呢

　　触发hasLayout的条件

　　1.position属性为absolute

　　2.float属性不为none

　　3.display属性为inline-block

　　4.width属性为auto之外的任意值

　　5.height属性为auto之外的任意值

　　6.zoom属性为normal之外的任意值

　　这样，对于IE8+，和其它现代浏览器我们可是使用伪元素:after的方法，对于IE6、7来说，就触发它的hasLayout就可以将浮动的问题解决了。

　　e.g.

      　　
     
      　　　　
      
       　　　　　　我是浮动元素　　　　
       
        　　
        
       
      
     

　　其中的*zoom，代表的是如果为IE6、7则其zoom属性为1（*是css hack，指后面跟的属性对IE6、7有效）

　　这样，我们就找到了清除（闭合）浮动的最佳方法了。

　　当然最后，我们要加上我们主要参考的文章——以及