清除浮动的五种方法以及优缺点

方法一：额外标签法

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

  优点：通俗易懂，书写方便。

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

  clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 。

css样式
 

#clear{
    clear: both;
}

html代码

<div id="parent">
    <div id="child"></div>
    <!-- 方法一  额外标签法 -->
    <div id="clear"></div>
</div> 

方法二：父元素添加overflow:hidden

  通过触发BFC方式，实现清除浮动

  优点：代码简洁

  缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

  css样式

#parent{
    overflow: hidden;
}

 

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

  优点：符合闭合浮动思想，结构语义化正确。

  缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

  css样式

#parent:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

方法四：使用before和after双伪元素清除浮动

  优点：代码更简洁

  缺点：用zoom:1触发hasLayout.

  css样式

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

 

方法五：为父元素设置高度

  缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

  优点: 简单粗暴直接有效，清除了浮动带来的影响