清除浮动的方法

方法一：父元素添加overflow:hidden（不推荐）

通过触发BFC方式，实现清除浮动。

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

方法二：使用额外标签法（不推荐）

在最后一个浮动标签后，新加一个标签，给其设置clear：both；

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好。

方法三：父类使用after伪元素清除浮动（推荐）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

 方法四：父级div定义 height 

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。