清除浮动

3.4清除浮动总结

为什么需要清除浮动？

1、父级没有高度
2、子盒子浮动了
3、影响下面布局了

清除浮动的方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

• 隔墙法
  在最后一个浮动后面添加盒子并添加clear: both;
• 父级overflow:hidden;
  给浮动元素的父盒子添加overflow:hidden
• 父级after伪元素
  添加css代码并给父级添加class名clearfix

    .clearfix::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix { /*IE6,7专用*/
      *zoom: 1;
    }

• 父级双伪元素
  添加css代码并给父级添加class名clearfix

    .clearfix::before, .clearfix::after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix { /*IE6,7专用*/
      *zoom: 1;
    }