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

求解释一下，每行的意义。尤其是这三个display:block;visibility:hidden;height:0

利用clear的空元素清除，overflow清除，给浮动的元素容器添加浮动，使用邻接元素处理，使用css的after伪元素，

其实呢，你可以自己在浏览器中一项一项的测试，这样才会理解的更快。如果不是块级元素的话，内容没法撑开，浮动元素的父元素高度为0，那个content："";也一样
利用 :after 伪元素的方法原理其实就是在元素末尾添加一个内容为一个.或 空 并带有 clear: both 属性的元素实现的。

可以在浏览器里一个个测试一下。这样更加加深你的印象

display:block;是将元素将显示为块级元素

clear:both;表示左右两侧均不允许浮动元素。

content后面一般接伪元before 及 :after。 加入空值“”表示没有；

visibility: hidden-是将元素隐藏,但是它还是占有位置