清除浮动的方法

1.额外标签法

给谁清除浮动就在谁的后面额外添加一个空白标签，给那个空白标签添加样式：style=‘clear：both’   /  class='clear' ===>.clear{clear:both}

浮动元素

<div  style='clear:both'></div>    //方式一      行内样式

<div  class=’clear‘></div>          <style>  .clear{ clear:both }    </style>    //方式二  两种做法一样

这里是通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上

2.父级添加  overflow:hidden

  要注意是给父元素加（并不是所有的浮动都要加，谁影响布局才清除谁）

3.使用after伪元素

给父元素添加 clearfix , 由于IE6-7不支持:after,所以使用*zoom：1，触发hasLayout

.clearfix:after{

        content:'';

        display:block;

        height:0;

        clear:both;

        visibility:hidden;}

.clearfix{ *zoom:1 }

4.使用before和after双伪元素

给父元素添加 clearfix

.clearfix:before,.clearfix:after{

         content:'';

         display:table;}

.clearfix:after{

         clear:both;}

.clearfix{

        *zoom:1;}