当我们使用float:left后,发现父级元素的div没有被撑开了. 通常情况下要清理浮动.

解决办法：

先设置代码为:　　

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

这样我们只要对父级div引入这个clearfix的类即可,即

<div class="clearfix" >

  <ul style="float:left">

  <li><a href="#">1</a></li>

   <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>   

</ul>

  </div>

　这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.　

　但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.　　

如下:

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

* html .clearfix {zoom: 1;}
*html .clearfix{ height:1%;}
*+html .clearfix{ height:1%;}

这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.