解決CSS中float:left後需要clear:both清空的繁瑣步驟

　　之前，因為公司專門有CSS+DIV的切片設計師，所以我一直都是注重程式的設計與開發。現在，因為接了一些Web網站的項目需要製作，就在空閑時間學習起了CSS、Jquery。

　　

　　現在，大部分的橫排導航都是通過 ul -> li *n -> a 來實現的。具我所知，要達到這種效果，有幾種方法可以實現。

　　1.傳統處理方式：

li {float:left;}/*這樣，對固定寬度導航條來說，li不能自動置中*/

 

 　2.inline-block方式：

　　

ul {text-align:center;font-family:simsun;font-size:14px;}li {display:inline-block;*display:inline;zoom:1;margin-right:-0.5em; *margin-right:0;}a{display:block;}/*行內顯示並且水平置中；display:inline;zoom:1;是對ie的hack,margin-right:0.5em是對現代瀏覽器去縫，*/

 

 　　瀏覽器FireFox,Chrome下，li之間有縫隙，Google得知縫隙由字型大小產生，所以另外加入hack來除縫。

　　 關於zoom:1;的作用，可以看下協助文檔，地址：http://www.yesky.com/imagesnew/software/css/css2/c_zoom.html

 

 　　而這兩種實現方法中，float:left要比display:inline;的表現方式要好。因為內聯（display:inline;）屬於行布局，其特性是在一行裡進行布局，所以不能被設定寬高。區塊層級元素的布局相對於內聯樣式要精確的多。所以盡量使用float:left;
 

　　當我們使用float:left後,發現父級元素的div沒有被撐開了. 通常情況下要清理浮動.這也是我們公司現在所使用的方法. 如

 

 

<div>      <ul style="float:left">           <li><a href="#">1</a></li>           <li><a href="#">2</a></li>           <li><a href="#">3</a></li>      </ul>       <!--需要清理浮動-->       <div style="clear:both"></div></div>

 

 

 

　　用了很久這樣的方法，每次寫Repeater綁定的時候都要加個<div style="clear:both"></div>的標籤,以前沒有注意到這方面的東西.今天重新寫樣式的時候,就上網搜了下替代的方法.果然在Google中搜到了一篇How To Clear Floats Without Structural Markup的文章,靈活的處理了清空浮動的問題

　　首先設定代碼為:

　　

.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;}

 

 這樣我們就可以只在父級div引用class類解決了繁瑣的清空步驟.

 下面給出別的網站清空浮動的代碼

/* 豆瓣的clear both方式 */.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden }.clearfix { zoom: 1; display: inline-block; _height: 1px }*html .clearfix { height: 1% }*+html .clearfix { height: 1% }.clearfix { display: block }/*蝦米的方式*/.clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden;}.clearfix{zoom:1;}