CSS中使用clearfix清除浮動(dòng)的方法

首先在很多很多年以前我們常用的清除浮動(dòng)是這樣的。
- .clear{clear:both;line-height:0;}
現(xiàn)在可能還可以在很多老的站點(diǎn)上可以看到這樣的代碼,相當(dāng)暴力有效的解決浮動(dòng)的問(wèn)題。但是這個(gè)用法有一個(gè)致命傷,就是每次清除浮動(dòng)的時(shí)候都需要增加一個(gè)空標(biāo)簽來(lái)使用。
這種做法如果在頁(yè)面復(fù)雜的布局要經(jīng)常清楚浮動(dòng)的時(shí)候就會(huì)產(chǎn)生很多的空標(biāo)簽,增加了頁(yè)面無(wú)用標(biāo)簽,不利于頁(yè)面優(yōu)化。但是我發(fā)現(xiàn)大型網(wǎng)站中 居然還在使用這種清楚浮動(dòng)的方法。有興趣的同學(xué)可以上他們首頁(yè)搜索一下他們的.blank0這個(gè)樣式名稱。
因此有很多大神就研究出了 clearfix 清除浮動(dòng)的方法,直接解決了上面的缺陷,不需要增加空標(biāo)簽,直接在有浮動(dòng)的外層加上這個(gè)樣式就可以了,這也是我們今天要討論的clearfix進(jìn)化史。
起源
- .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
解釋一下以上的代碼:
對(duì)大多數(shù)符合標(biāo)準(zhǔn)的瀏覽器應(yīng)用第一個(gè)聲明塊,目的是創(chuàng)建一個(gè)隱形的內(nèi)容為空的塊來(lái)為目標(biāo)元素清除浮動(dòng)。
第二條為clearfix應(yīng)用 inline-table 顯示屬性,僅僅針對(duì)IE/Mac。利用 * 對(duì) IE/Mac 隱藏一些規(guī)則:
height:1% 用來(lái)觸發(fā) IE6 下的haslayout。
重新對(duì) IE/Mac 外的IE應(yīng)用 block 顯示屬性。
最后一行用于結(jié)束針對(duì) IE/Mac 的hack。(是不是覺(jué)得很坑爹,Mac下還有IE)
起源代碼可能也是很早期的時(shí)候了,再往后Mac下的IE5也發(fā)展到IE6了,各種瀏覽器開(kāi)始向W3C這條標(biāo)準(zhǔn)慢慢靠齊了。所以就有了下面這個(gè)寫(xiě)法出現(xiàn)了。
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- * <span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" 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=html&k0=html&kdi0=0&luki=5&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="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">html</span></a></span> .clearfix { zoom: 1; } /* IE6 */
- *:first-child+html .clearfix { zoom: 1; } /* IE7 */
IE6 和 IE7 都不支持 :after 這個(gè)偽類,因此需要后面兩條來(lái)觸發(fā)IE6/7的haslayout,以清除浮動(dòng)。幸運(yùn)的是IE8支持 :after 偽類。因此只需要針對(duì)IE6/7的hack了。
在一個(gè)有float 屬性元素的外層增加一個(gè)擁有clearfix屬性的div包裹,可以保證外部div的height,即清除"浮動(dòng)元素脫離了文檔流,包圍圖片和文本的 div 不占據(jù)空間"的問(wèn)題。
Jeff Starr 在這里針對(duì)IE6/7用了兩條語(yǔ)句來(lái)觸發(fā)haslayout。我在想作者為什么不直接用 * 來(lái)直接對(duì) IE6/7 同時(shí)應(yīng)用 zoom:1 或者直接就寫(xiě)成:
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- .clearfix{*zoom:1;}
但是對(duì)于很多同學(xué)這種優(yōu)化程度代碼還是不夠給力,clearfix 發(fā)展到現(xiàn)在的兩個(gè)終極版。
重構(gòu)clearfix浮動(dòng)
構(gòu)成Block Formatting Context的方法有下面幾種:
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block中的任何一個(gè)。
position的值不為relative和static。
很明顯,float和position不合適我們的需求。那只能從overflow或者display中選取一個(gè)。
因?yàn)槭菓?yīng)用了.clearfix和.menu的菜單極有可能是多級(jí)的,所以overflow: hidden或overflow: auto也不滿足需求
(會(huì)把下拉的菜單隱藏掉或者出滾動(dòng)條),那么只能從display下手。
我們可以將.clearfix的display值設(shè)為table-cell, table-caption, inline-block中的任何一個(gè)
但是display: inline-block會(huì)產(chǎn)生多余空白,所以也排除掉。
剩下的只有table-cell, table-caption,為了保證兼容可以用display: table來(lái)使.clearfix形成一個(gè)Block Formatting Context
因?yàn)閐isplay: table會(huì)產(chǎn)生一些匿名盒子,這些匿名盒子的其中一個(gè)(display值為table-cell)會(huì)形成Block Formatting Context。
這樣我們新的.clearfix就會(huì)閉合內(nèi)部元素的浮動(dòng)。
后面又有人對(duì)此進(jìn)行了改良:
終極版一:
- .clearfix:after {
- content:"\200B";
- display:<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" 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=block&k0=block&kdi0=0&luki=6&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="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;
- height:0;
- clear:both;
- }
- .clearfix {*zoom:1;}/*IE/7/6*/
解釋下:content:"\200B";這個(gè)參數(shù),Unicode字符里有一個(gè)“零寬度空格”,即 U+200B,代替原來(lái)的“.”,可以縮減代碼量。而且不再使用visibility:hidden。
終極版二:
- .clearfix:before,.clearfix:after{
- content:"";
- display:table;
- }
- .clearfix:after{clear:both;}
- .clearfix{
- *zoom:1;/*IE/7/6*/
- }
這兩個(gè)終極版代碼都很簡(jiǎn)潔,終極版一和二都可以使用,以上代碼都經(jīng)過(guò)測(cè)試,大家趕緊用一下吧,如果有什么問(wèn)題請(qǐng)及時(shí)跟我反饋,如果你還停留在clearfix的老代碼的時(shí)候就趕緊更新一下代碼吧。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇css之clearfix的用法深入理解(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2023-05-12
淺談css清除浮動(dòng)(clearfix和clear)的用法
下面小編就為大家?guī)?lái)一篇淺談css清除浮動(dòng)(clearfix 和clear)的用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2023-05-12用clearfix:after消除css浮動(dòng)解決外部div不能撐開(kāi)問(wèn)題
如果有一個(gè)DIV作為外部容器,內(nèi)部的DIV如果設(shè)置了float樣式,則外部的容器DIV因?yàn)閮?nèi)部沒(méi)有clear,導(dǎo)致不能被撐開(kāi)。使用clearfix:after,可以解決這個(gè)問(wèn)題2014-06-16css中clearfix清除浮動(dòng)的用法及其原理示例介紹
大家對(duì)css中clearfix并不陌生吧,它的作用就是清除浮動(dòng),下面對(duì)clearfix的定義及實(shí)現(xiàn)原理簡(jiǎn)要的為大家做個(gè)介紹,另外還有個(gè)不錯(cuò)的示例,喜歡的朋友不要錯(cuò)過(guò)2013-11-05css清除浮動(dòng)clearfix:after的用法詳解(附完整代碼)
如果外部有一個(gè)div容器,其內(nèi)部div容器設(shè)置了float樣式,則外部的容器div因?yàn)閮?nèi)部沒(méi)有clear,導(dǎo)致不能撐開(kāi)2023-05-12clear 萬(wàn)能清除浮動(dòng)(clearfix:after)
有時(shí)候我們需要清楚浮動(dòng)的一些操作,這里介紹的是clearfix:after的實(shí)例代碼,需要的朋友可以參考下2023-05-12clearfix:after清除浮動(dòng)的用法及測(cè)試代碼
本文主要講解下css中的清除浮動(dòng)的使用,在網(wǎng)頁(yè)布局中此屬性的作用不可小視,它的存在對(duì)你的布局好壞有所影響,感興趣的朋友可以參考下哈2013-04-26overflow:hidden line-height clearfix:after使用方法介紹
overflow:hidden的作用是隱藏溢出,line-height指的是在DIV中的元素上下居中接下來(lái)詳細(xì)介紹它們的用法,感興趣的朋友可以了解下哦2013-01-08什么是clearfix (一文搞清楚css清除浮動(dòng)clearfix)
clearfix 是一種 CSS 技巧,可以在不添加新的 html 標(biāo)簽的前提下,解決讓父元素包含浮動(dòng)的子元素的問(wèn)題。這個(gè)技巧的版本是很多的,最流行的一個(gè)是 Micro Clearfix Hack2023-05-12