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 */
  }