css清除浮动的几种方式

第一种： 添加额外标签

        谁需要清除浮动，就它在后面添加一个标签 并且将标签设置成 clear：both 

优点： 通俗易懂，书写简单

缺点： 添加过多没有意义的标签，结构化比较差，代码变得臃肿

第二种：父级添加 overflow 

        通过触发BFC的方式 实现清除浮动，但是必须定义width或zoom：1 ，同时不能定义height，使用 overflow: hidden ; 时浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出来的元素。不能和 position 配合使用 ，因为超出的尺寸会被隐藏。

第三种：使用 after 伪类元素清除浮动

           :after 方式为空元素的升级版，好处就是不需要再单独的加标签了。ie8以上和非ie浏览器才支持 :after ，zoom(ie专有的属性)可以解决 ie6、ie7 浮动的问题

优点：符合浮动思想，结构语义化正确

缺点：由于ie6-7 不支持 :after ，使用 zoom:1

第四种：使用 before 和 after 双伪类元素清除浮动

优点：代码更加简洁