CSS清除浮动集合

CSS去除浮动有哪几种方法，各有哪些优缺点

说出花来无非就是利用clear属性清除浮动,或使父容器形成BFC

• 父级元素定高度

• 在父级元素闭合前引入一个空元素，并使用 clear:both

<style>
.left{float: left}
.right{float: right}
.clear{clear:both}
</style>
<div> 
    <div class="left">left浮动</div> 
    <div class="right">right浮动</div> 
    <div class="clear"></div> 
</div>

• 第二种的改良版本，不添加html而使用CSS伪类添加一个空元素

    .clearfix:after {
        content: "",
        display: block,
        clear: both
    }
  

• overflow: auto;

    .clearfix {
    	overflow: auto;
    	zoom: 1; /* 兼容IE */
    }
  

• BFC
  overflow: auto;

    /* overflow属性会影响滚动条和绝对定位的元素 */
    .clearfix {
    	overflow: auto;
    	zoom: 1; /* 兼容IE */
    }
  

  float: left;

    /* float形成BFC的时候会使父容器的长度缩短 */
    .clearfix {
    	float: left;
    	zoom: 1; /* 兼容IE */
    }