第一种

清除浮动的三种方式_css

/*声明清除浮动的样式*/
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .clearfix {
            *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
        }

第二种

/*声明清除浮动的样式*/
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

第三种

给父元素加 overflow：hidden