浮动的本质和清除浮动的几种方式介绍和总结！！！

 1.为什们要清除浮动？清除浮动的本质是什么？

    由于父级盒子很多情况下，不方便使用高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0的时候，就会影响下面标准流盒子的排列。 

（1）在父级盒子不设置高度的情况下需要清楚浮动。                                                                  （2）子盒子进行了浮动，发生了盒子的重叠。                                                                                  （3） 影响到了下面网页的布局。这几种情况，就应该进行浮动的清除。

清除浮动的本质是清除浮动元素脱离标准流造成的影响。如果父级元素本身具有一定的高度则不需要清除浮动。清除浮动后，父元素会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流布局。

清除浮动的方法主要有四种：

1.第一种：额外标签法，也叫隔墙法。是w3cschool推荐使用的方法。

  

注意：在我们平时的开发种我们几乎只用：clear：both; 

优点：通俗易懂，书写方便。    缺点：添加无意义标签，结构化差。

第二种：父级元素加overflow

overflow：hidden；        overflow：auto；          overflow：scroll；

第三种：父元素添加伪类 ：after

.clearfix:after {

            content: " ";

            display: block;

            clear: both;

            height: 0;

            visibility: hidden;

        }

    .clearfix {   /*IE6,7专有*/

            *zoom: 1;}

使用这种方法的优点：没有增加标签，结构更简单。        缺点：照顾低版本浏览器。

 

第四种方法：父级元素添加双伪元素。

.clearfix:after,

        .clearfix:before {

            content: "";

            display: table;

        }

.clearfix:after {

            clear: both;

        }

  .clearfix {

            *zoom: 1;

        }

总结：以下对这四种方法的特性做一个梳理，在平时的开发过程中我们比较常用的是第三种和第四种方法。