本文共 1949 字，大约阅读时间需要 6 分钟。

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

.当我给内部两个盒子加上float属性的时候

总结一下：

当父元素不给高度的时候，

内部元素不浮动时会撑开

而浮动的时候，父元素变成一条线

一、 额外标签法：

给谁清除浮动，就在其后额外添加一个空白标签 。

优点： 通俗易懂，书写方便。（不推荐使用）

缺点： 添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

   
    
    
      
     
      big
     
      
     
      small
     
      
     
      额外标签法
     
    
    
    
    
     footer
    
  
   
.clear{
           clear:both;    }

二、 父级添加overflow方法：

可以通过触发BFC的方式，实现清楚浮动效果。

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

.fahter{
       width: 400px;    border: 1px solid deeppink;    overflow: hidden;}

注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

三、使用after伪元素清除浮动：

:after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

（检索指从用户特定的信息需求出发，对特定的信息集合采用一定的方法、技术手段，根据一定的线索与规则从中找出相关信息。）

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

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

四、使用before和after双伪元素清除浮动：（较常用推荐）

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

优点： 代码更简洁

缺点： 用zoom:1触发 hasLayout.

补充

父级div定义 height：

父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点： 简单、代码少、容易掌握

缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

转载地址：http://hzylf.baihongyu.com/