清除浮动

1、父元素div定义高度

    优点：简单、容易理解

    缺点：只适合固定宽高的布局，如果高度和和父级div不一样时候，会产生新的问题

2、结尾处加空div标签clear：both

    优点：简单、代码少、浏览器支持、不容易出现怪异问题

    缺点：如果页面浮动布局多，需要增加很多空div

3、使用伪类

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

4、父级使用overflow:hidden

    优点：简单、浏览器支持
    缺点：不能和position配合使用，因为超出的尺寸会被隐藏

5、父级一起浮动

    会产生新的浮动问题

解决浮动产生的问题

1、右浮动掉下来：
        把右浮动在html结构中先声明
        三个都改成浮动
        放弃浮动使用定位