清除浮动的方法

1.给装div里的div再添加一个div。它的样式为 clear(清楚浮动):both;(不推荐使用)
科普 clear：里的属性有left,right,both,none,inherit.
当为left只为左浮动的目标起作用,就是取消左浮动
当为right时只为右浮动的目标起作用,就是取消左浮动
当为both时则是左右两边
当为none时允许浮动元素出现在两侧
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差

2.给父元素加上样式
overflow:auto或overflow:hidden(不推荐使用)
这个方法的原理是通过触发BFC方式，实现清除浮动
BFC 全称为 块格式化上下文
1.使BFC内部浮动元素不会到处乱跑
2.和浮动元素产生边界。
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3.给父元素也浮动(不推荐使用)
缺点：父元素也有浮动的特性。

4.给父元素高度(不推荐使用)

5.定位小相大绝(不推荐使用)
position: absolute;
position: relative;

6.使用after伪元素清除浮动（推荐使用）
#father:after{
clear: both;
content: “”;
display: block;
visibility: hidden;
hegiht:0;
}
#father:{*zoom:1;}
优点：符合闭合浮动思想，结构语义化正确
缺点：代码量多，因为IE6-7下不支持after伪元素，需要额外写zoom:1来触发hasLayout

7.使用before和after双伪元素清除浮动（推荐使用）
#father:before,#father:after {
content:".";
display:table;
}
#father:after {
clear:both;
}
#father {
*zoom:1;
}