當我們使用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類解決了繁瑣的清空步驟.