清楚浮动

1.额外标签法

＜div style="clear:both;">＜/div>
//或者下面
＜br style="clear:both;" />

2.父级添加overflow:hidden;，触发BFC的方式实现清除浮动效果

3.:after 案例：百度 淘宝网 网易

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

4.before和after 案例：小米 腾讯 代码更简洁

  .clearfix::after,.clearfix:before {
            content: ".";
            display: table;/* 这句话可以触发BFC */
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

给父盒子的class属性添加clearfix就可以使用了