清除浮动大总结

       首先要明白的是css 设计float属性的主要目的是为了实现文本绕排图片 ，然而，这个属性居然也成了创建多栏布局最简单的方法。

        浮动的元素会脱离常规的文档流，是因为当你浮动某个元素的时候，你是在要求浏览器把它往上放推，直到它碰到父元素（也就是body元素）的内边界，自然位于它后面的元素不再认为浮动元素在文档流中位于它的前面了。

         

• 父元素着手---

              第一种：浮动元素后，该元素的父元素看不见它，所以为父元素添加overflow:hidden;强制它包围浮动元素。

                          *overflow的作用一方面能使容器切掉超大子内容，另一方面就是能强制迫使父元素包含其浮动元素。

              第二种：同时浮动父元素。因为浮动的父元素，不管子元素是否浮动都会紧紧包围住它的子元素。

•  父元素末尾添加非浮动元素---    

              第三种：添加非浮动的清除元素。强者父元素包含其浮动的子元素，就是给父元素的最后添加一个非浮动的子元素，然后再清除该子元素。（原因是，清除该子元素会让该子元素位于浮动元素的下方，因为清除了，所以父元素会包裹该清除后的元素，而包含该元素，自然会包含它前面的浮动元素）

              给父元素添加clearfix类：

               .clearfix:after{

               content:’.’;

               display:block;

               height:0;

               visibility:hidden;

               clear:both;

            }  

• 如果没有父元素，此时最简单的办法是使用clear:both;去强迫它定位在前一个浮动元素下方。但是，如果在空间足够容纳多个元素向上浮动时，这个办法就不奏效了。此时可以给每个向上浮动元素添加前面的.clearfix类。