先上css代码：

body,ul,li,a{    padding: 0 ;    margin:0;    font-size: 18px;    color: white;    font-weight: 900;}.all{    width: 260px;    height: 240px;    margin:100px auto;}.clear:after{    content: ".";    height: 0;    visibility: hidden;    display: block;    clear: both;}.Css{    width: 140px;    height: 140px;    background: #6bd179;    float: left;    text-align: center;    line-height: 140px;}.Node{    width: 120px;    height: 70px;    background: #309ed5;    float: left;    text-align: center;    line-height: 70px;}.JQuery{    width: 120px;    height: 70px;    background: #3ebfd5;    float: left;    text-align: center;    line-height: 70px;}.Javascript{    width: 100px;    height: 100px;    background: #ebb742;    float: left;    text-align: center;    line-height: 100px;}.Html{    width: 160px;    height: 100px;    background: #80e35e;    float: left;    text-align: center;    line-height: 100px;}@-webkit-keyframes FZ {    0% {        -webkit-transform: perspective(400px) rotateX(0deg);        opacity: 1;    }    100% {        -webkit-transform: perspective(400px) rotateX(180deg);        opacity: 0;    }}@-webkit-keyframes XZ {    0% {        -webkit-transform: perspective(400px) rotateY(0deg);        opacity: 0;    }    100% {        -webkit-transform: perspective(400px) rotateY(180deg);        opacity: 1;    }}

.clear:after{

    content: ".";//生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。

    height: 0;//避免生成内容破坏原有布局的高度。

    visibility: hidden;//使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。

    display: block; //使生成的元素以块级元素显示,占满剩余空间。

    clear: both;

}

要在IE下触发 hasLayout  还需要多设置一个属性： zoom：1。

这个原理就是给父元素设置类名，css样式里用after伪元素在浮动后的子元素添加。

这样做的好处喃？我也是在网上看的，大神都说：“结构和语义化完全正确,代码量居中”

html：

JQuery控制的CSS3动画，还是有些bug，大家把代码复制下来 运行运行就知道了。

        
        
        
    
     
          
      
       Css    
       
        Node.js    
        
         JQuery    
         
          Javascript    
          
           Html