css清除浮動方法小結

清除浮動其實主要解決的就是高度塌陷問題，具體在此再也不贅述~~~那些年咱們一塊兒清除過的浮動（大佬博客，寫的挺不錯）

方法小結：1.

1）添加額外標籤

這是在學校老師就告訴咱們的 一種方法，經過在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>，其餘標籤br等亦可。

<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

　

優勢：通俗易懂，容易掌握

缺點：能夠想象經過此方法，會添加多少無心義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅定不能忍受的，因此你看了這篇文章以後仍是建議不要用了吧。

 

 2)父元素設置 overflow：hidden

經過設置父元素overflow值設置爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1；

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素設置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

 

優勢：不存在結構和語義化問題，代碼量極少

缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素；04年POPO就發現overflow:hidden會致使中鍵失效，這是我做爲一個多標籤瀏覽控所不能接受的。因此仍是不要使用.

3）父元素也設置浮動

優勢：不存在結構和語義化問題，代碼量極少

缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用

上面的幾種方法都有各類各樣的問題，下面的推薦方法：

4）使用:after 僞元素

須要注意的是 :after是僞元素（Pseudo-Element），不是僞類（某些CSS手冊裏面稱之爲「僞對象」）.

因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

 該方法源自於: How To Clear Floats Without Structural Markup

原文所有代碼以下:

<style type="text/css">
 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }  
.clearfix {display: inline-block;}  /* for IE/Mac */  
</style>
<!--[if IE]>
 <style type="text/css">
 .clearfix {zoom: 1;/* triggers hasLayout */  display: block;/* resets display for IE/Win */} </style>
  <![endif]-->
 鑑於 IE/Mac的市場佔有率極低,咱們直接忽略掉,最後精簡的代碼以下:
 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

或者

經過增長before便可避免瀏覽器頂部崩潰，是一種推薦你們使用的方法！

　補充：

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

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

2) height:0 避免生成內容破壞原有佈局的高度。

3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;

4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；

5）zoom：1 觸發IE hasLayout。

經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

本文來自:http://www.javashuo.com/article/p-fesxmzah-dk.html