清除浮动的影响

额外标签法

通过在浮动元素的末尾添加一个空的标签 例如<div style="clear:both"></div>，或者其他标签br等均可。——W3C推荐

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。

父级添加overflow属性方法

可以通过出发BFC的方式，可以实现清除浮动的效果。

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

优点：代码简洁

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

使用after伪元素清除浮动

给浮动元素的父级添加类名clearfix

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

//content里面写一个'.'，尽量不要写空，否则旧版本浏览器有空隙

.clearfix { *zoom:1} /* IE6、7专有*/

//*代表IE6-7能识别的特殊符号，带有"*"的属性只有IE6-7才执行

//zoom是IE6-7清除浮动的处理方式

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

缺点：由于IE6-7不支持after，使用zoom：1触发hasLayout。

代表网站：百度、淘宝网、网易等

使用before、after双伪元素清除浮动

.clearfix::before,.clearfix::after{ content:""; display:table }//触发BFC

.clearfix::after{clear:both }

.clearfix { *zoom:1}

代表网站：小米、腾讯