常用的清楚浮动的办法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

清楚浮动其实是利用BFC模型来闭合。

第一种，css清除浮动 clear： left | right | both

清除左侧、右侧、或者左右侧的浮动

第二种，额外标签法

就是在末尾添加一个空标签。没有任何内容的div

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

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

第三种，给父元素添加 overflow：hidden 属性方法

优点： 代码简洁

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

第四种，使用 :after伪元素清楚浮动

使用方法：

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

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

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

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

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

第五种，使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

优点： 代码更简洁

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

代表网站： 小米、腾讯等