css常见清除浮动法

  清除浮动主要是为了解决父级元素因为子级浮动脱标引起内部高度为0的问题，常见的清除浮动方法如下四种：

1.额外标签法

  在父级中浮动的盒子后面添加一个空盒子，并给这个空盒子添加清除浮动
优点：通俗易懂，书写方便
缺点：会增加页面无意义的标签，结构化较差

html:
<div class="father">
    <div class="son1">左浮动</div>
    <div class="son2">右浮动</div>
    <div class="clear"></div>//空盒子用来清除浮动
</div>
css:
  .father{ width:100%;}
  .son1{  width:50%;  heigth:100px;  float:left;}
  .son2{ width:50%;  heigth:100px;  float:right;}
  .clear{ clear:both;} // 清除左右浮动

2.父级添加overflow方法

  可以通过触发BFC的方式，实现清除浮动的效果，给父级添加 overflow:hidden|auto|scroll即可。
优点：代码简洁
缺点：当内容较多时，不会自动换行，内容会隐藏无法展示溢出的内容

3.使用after伪元素清除浮动

:after方式为额外标签的升级版，在需要清除浮动的盒子添加clearfix类名就好了

.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;} //兼容 IE6  IE7 触发hasLayout

优点：不用额外添加无意义的标签，符合闭合浮动思想，结构语义化正确
缺点：IE6/7不支持:after，使用zoom:1触发hasLayout
注意：content:'.'里面跟一个小点，不要为空，因为firefox7.0以前的版本会生成空格

4.使用before和after双伪元素清除浮动 推荐使用

.clearfix:before,clearfix:after{content:'.';display:table;}
.clearfix:after{clear:both}
.clearfix{*zoom:1;} //兼容 IE6  IE7 触发hasLayout

优点：代码简洁，完全符合闭合浮动思想，清除浮动首选，良心推荐！
缺点：IE6/7不支持:after，使用zoom:1触发hasLayout
注意：content:'.'里面跟一个小点，不要为空，因为firefox7.0以前的版本会生成空格