前端css清除浮动的方法

首先，清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
解决方法：
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

<div class="fahter">
    <div class="big">big</div>
    <div class="small">small</div>
    <div class="clear">额外标签法</div>
</div>

2.父级添加overflow属性（父元素添加overflow:hidden）
3.使用after伪元素清除浮动

  .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";
      display: block;
      height: 0;
      clear:both;
      visibility: hidden;
  }
  .clearfix{
      *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }
  <div class="fahter clearfix">
      <div class="big">big</div>
      <div class="small">small</div>
  </div>

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

 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
 }
 .clearfix:after{
     clear: both;
 }
 .clearfix{
     *zoom: 1;
 }