CSS中使用clearfix清除浮動的方法

2024-07-11 08:30:04

字體：大中小

來源：轉載

供稿：網友

　　首先在很多很多年以前我們常用的清除浮動是這樣的。

CSS Code復制內容到剪貼板

　　現在可能還可以在很多老的站點上可以看到這樣的代碼，相當暴力有效的解決浮動的問題。但是這個用法有一個致命傷，就是每次清除浮動的時候都需要增加一個空標簽來使用。

　　這種做法如果在頁面復雜的布局要經常清楚浮動的時候就會產生很多的空標簽，增加了頁面無用標簽，不利于頁面優化。但是我發現大型網站中居然還在使用這種清楚浮動的方法。有興趣的同學可以上他們首頁搜索一下他們的.blank0這個樣式名稱。

　　因此有很多大神就研究出了 clearfix 清除浮動的方法，直接解決了上面的缺陷，不需要增加空標簽，直接在有浮動的外層加上這個樣式就可以了，這也是我們今天要討論的clearfix進化史。

　　起源

CSS Code復制內容到剪貼板

.clearfix:after { visibility: hidden;
display: block; font-size: 0;
content: " "; clear: both;
height: 0; }
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }//Hides <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=3fdf214c8ec2a5ea&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=eaa5c28e4c21df3f&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">from</span></a></span> IE-mac .clearfix { display: block; }//End hide from IE-mac

　　解釋一下以上的代碼：