關於網頁設計的浮動圖層CSS解法
原CSS大部分的用法：
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
上方CSS內容說明：
1.對大多數符合標準的網頁設計應用第一個聲明區域，目的是創建一個隱形的內容為空的塊來為目標元素清除浮動。
2.第二條為clearfix應用 inline-table 顯示屬性，僅僅針對IE/Mac。*利用 * / 對 IE/Mac 隱藏一些規則：
3. height:1% 用來觸發 IE6 下的haslayout。
4.重新對 IE/Mac 外的IE應用 block 顯示屬性。
5.最後一行用於結束針對 IE/Mac 的hack。
由於此方法針對的網頁設計或成為歷史（尤其是Mac下的IE5 ），或正在靠近標準的路上，這個方法就不再那麼接近流行了。
不需要對 IE/Mac 的支援之後，新的清除浮動方法：
/* new clearfix */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
上方CSS內容說明：
IE6 和 IE7 都不支持 :after 這個新標準，因此需要後面兩條來觸發IE6/7的haslayout，以清除浮動圖層。幸運的是IE8支持 :after 新標準。因此只需要針對IE6/7的hack了。
平時都是用 overflow:hidden 來清除浮動圖層的，因為夠簡單粗暴。但是 overflow 有時候也不太適用：
父級元素使用 overflow:hidden 時，如果其子元素定位到部分或全部在父元素之外，父元素就會對超出其外的子元素部分進行裁剪。
對 CSS3 來說，也會 overflow:hidden 也會對一些屬性產生影響。
例如 box-shadow, 當父元素使用 overflow:hidden 屬性時，box-shadow 會被裁剪。
其他可能被影響的元素如 text-shadow 和 transform
對於那些不願意再給標籤添加額外的 clearfix 類來清除浮動圖層的人來說，直接將需要清除浮動圖層的元素添加進清除浮動圖層代碼塊這個組也是一個辦法。
這種情況下，網頁設計和CSS樣式就像一個蹺蹺板的兩頭。網頁設計的程式碼乾淨多了，CSS樣式卻出現了一定的繁雜。而且一旦專題頁面過長，或者在項目中使用，用這個清除浮動的CSS樣式方式反而會不勝其擾。
歸結下來，還是得看個人、項目的權衡選擇，雖然我一直用簡單粗暴的overflow:hidden，但是現在更傾向於使用 clearfix，感覺這種一體化的東西更靠譜，能避免偶爾對 zoom 的遺忘。
成熟的東西穩定性好，但是會比較複雜、厚重;簡單的靈活性好，但是過於零散、隨意，沒有組織性，還沒那麼穩定.權衡決定到底要使用那種方法，有時候反而比問題本身還讓人頭疼.
我個人的想法是沒有好與壞的區別，只有合適不合適的區別。但是我們一直都受困於所受的教育，什麼問題都有標準答案，非對即錯，非好即壞。經常可見對一些工具的討論，都是奔著爭出個誰好誰壞而去的，例如 jQuery mootools YUI.相比起到底是好誰壞，我們還是最好趕緊改變想法，捨棄”一刀切”的想法吧。
轉貼來源：前端觀察
參考文獻：
1.約瑟夫‧派恩（B. Joseph Pine II）& 詹姆斯‧吉爾摩（James H. Gilmore）、夏業良譯（2003）。體驗經濟時代。台北：經濟新潮社。
2.賴逸婷（2007）。網站體驗品質評估之研究。國立雲林科技大學視覺傳達設計研究所碩士論文，未出版。
3.張婷玥（2006）。顧客體驗與體驗品質之概念性研究。國立政治大學企業管理研究所碩士論文，未出版。
相關文章
瀏覽器如何在網頁設計中的本文正確顯示出內容?重新發現網頁設計的表格網頁設計的特殊符號介紹MAC下的網頁設計中文字體優化回應式網頁設計
最新文章
HVACKer：入侵隔離網絡的新型攻擊技術還有什麼不會被入侵？路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌，最狂的是一家估值 124 億美的數據分析新創！【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala，下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了
