清除浮动

1、在父级元素添加代码：

   .clear-float:after{
        display:block;
        clear:both;/*清除浮动*/
        content:'';
        visibility:hidden;
        height:0;
    }
   .clear-float{
        zoom:1;
    }

IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有有属性)可解决ie6,ie7浮动问题，兼容性很好，不容易出现怪问题。

2、在结尾处添加空div，设置clear:both

      .clear-float{

           clear:both;

       }

        添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。简单，代码少，浏览器支持好，不容易出现怪问题。不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。不推荐使用。

3、父级div定义高度

    父级div手动定义height，就解决了父级div无法自动获取到高度的问题。简单，代码少，容易掌握。只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。

4、父级定义overflow:hidden

    必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。简单，代码少，浏览器支持好。不能和position配合使用，因为超出的尺寸的会被隐藏。只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。