.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
}

.clearfix {
    zoom: 1;
}

什么时候需要清除浮动呢？

首先明确 浮动是要脱离标准流的 也就是说浮动起来的元素是不占有自己原先的位置的

当父元素的内容均浮动并且没有给父元素设置高度的时候  下面的标准流的元素就会顶替到上来 造成结构错乱。此时在css中添加如上的代码，并且在父元素添加clearfix类就可以啦！