清除浮动的几种方式

一、添加新的标签

给最后一个浮动元素添加新的标签，设置一个属性为 clear：both 。（缺点：添加无意义标签，结构较差）

二、通过给父级添加overflow属性

添加 overflow：hidden。（缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素）

三、通过添加伪元素：before 或者：after 实现

页面尾部清除浮动

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

 

也可用以下代码，清除其前后同时带来的差异。 

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