清除浮动的三种方法

清除浮动的三种方法

清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

1.额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear : both>，或则其他标签br等亦可。
优点:通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差。我只 能说，w3c你推荐的方法我不接受，你不值得拥有。。。

2. 给父级添加overflow

可以给父级添加: overflow为 hidden | auto | scroll都可以实现。

优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.万能清除浮动

使用after伪元素清除浮动
:after方式为空元素的升级版，好处是不用单独加标签了
使用方法:
**

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

**
.clearfix {zoom: 1;} / IE6、7专有*/
优点:符合闭合浮动思想结构语义化正确.
缺点:由于IE6-7不支持:after, 使用zoom:1触发hasLayout.
代表网站:百度、淘宝网、网易等