清除浮动有哪些方式？

为什么要清除浮动？

1.父级元素因为子元素浮动引起了高度变化；
2.影响页面布局

清除浮动的方式

1.额外标签法
  在浮动元素的最后添加一个块级元素，给其设置一个clear：both；的属性。
  缺点：会在页面产生很多空白标签，造成结构混乱。
2.给浮动盒子的父元素添加高度。
  缺点：这种方式是不灵活。
3.给浮动元素的父元素设置overflow：hidden；或者overflow：auto；
  缺点：内容变多时，不能自动换行，导致内容被隐藏。
4.使用伪元素法 (推荐使用)
    <div class="clear">
      <div>aaa</div>
    </div>
    .clear:after {
        content:"";   /*设置内容为空*/
        display:block;   /*将内容转换块级元素*/
        height:0;   /*高度为0*/
        visibility:hidden;   /*将元素隐藏起来*/
        clear:both;   /*清除浮动*/
     }
     .clear {
        zoom: 1;   /*兼容IE*/
     }