清浮动的六种方式

都知道如果没有清除浮动的话，就会脱离文档流；在做前端项目的时候，经常需要清除浮动，本篇文章主要是复习一下清浮动的六种方式

一. br标签清浮动

<div>
    <span style="float: left;">br标签清浮动</span>
    <br />
</div>复制代码

优点：代码量少

缺点：结构与表现未分离

二. 父元素设置overflow: auto

<div style="overflow:auto;">
    <span style="float: left;">清浮动</span>
</div>复制代码

优点：代码量少，不存在语义化的问题

缺点：多个嵌套后，FF某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块出现滚动条。

三. 父元素设置overflow: hidden

<div style="overflow:hidden;">
    <span style="float: left;">清浮动</span>
</div>复制代码

优点：代码量少，不存在语义化的问题

缺点：内容增多的时候，易造成不自动换行，导致内容被隐藏

四. 父元素浮动

<div style="float: left;">
    <span style="float: left;">清浮动</span>
</div>复制代码

优点：代码量少，不存在语义化的问题

缺点：会使父元素和相邻元素之间的布局受到影响，不可能一直浮动到body

五. 父元素设置display:table

<div style="display:table">
    <span style="float: left;">清浮动</span>
</div>复制代码

优点：结构语义化正确，代码量少

缺点：改变了盒模型属性

六. after伪元素清浮动

<style type="text/css">
    .clearfix:after {
        content:"\200B"; 
        display:block; 
        height:0; 
        clear:both; 
    }
    .clearfix { 
        *zoom:1; 
    }
</style>
<div class="clearfix">
    <span style="float: left;">清浮动</span>
</div>复制代码

(1) display:block 使生成的元素以块级元素显示,占满剩余空间;

(2) height:0 避免生成内容破坏原有布局的高度。

(3) content:"\200B" Unicode字符里有一个“零宽度空格”，也就是U+200B，这个字符本身是不可见的

(4) zoom：1 触发IE hasLayout。

优点：结构语义化正确，使用方便

缺点：复用方式不当会造成代码量增加