CSS清除浮動程式碼例項

在佈局中，浮動是必須要用到的，在使用浮動之後，必須要清除浮動，否則可能會出現各種意想不到的問題。清除浮動的程式碼有多種，下面就介紹一下常用的幾種清除浮動的程式碼，希望能給需要的朋友帶來幫助。

一.在結尾處結合clear:both使用空標籤:

此方法最為簡單，就是在浮動的標籤後面新增一個空標籤，然後在此標籤上新增clear:both屬性即可，程式碼如下:

（1）.CSS程式碼:

[CSS] 純文字檢視 複製程式碼
.clear{clear:both;}

（2）.HTML程式碼:

[HTML] 純文字檢視 複製程式碼
<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div class="clear"></div>
</div>

二.使用overflow:hidden屬性:

如果子元素使用了浮動，那麼可以在父元素上施加overflow:hidden屬性即可清除浮動，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<ul style="overflow:hidden">
  <li>螞蟻部落</li>
  <li>螞蟻部落</li>
  <li>螞蟻部落</li>
  <li>螞蟻部落</li>
</ul>

三.偽物件after:

定義一個類，使用偽物件after,控制浮動元素的影響。

[CSS] 純文字檢視 複製程式碼
.clearFix:after{
  clear:both;
  display:block;
  visibility:hidden;
  height:0;
  line-height:0;
  content:'';
}
.clearFix{zoom:1;} /*解決ie6/7相容問題*/

以上程式碼是最為優秀的清除浮動程式碼，因為不會產生任何意外問題。