欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS中怎么使用clearfix清除浮動(dòng)

這篇文章主要介紹“CSS中怎么使用clearfix清除浮動(dòng)”，在日常操作中，相信很多人在CSS中怎么使用clearfix清除浮動(dòng)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS中怎么使用clearfix清除浮動(dòng)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、彭陽(yáng)網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)公司、彭陽(yáng)網(wǎng)絡(luò)營(yíng)銷、彭陽(yáng)企業(yè)策劃、彭陽(yáng)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供彭陽(yáng)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.chinadenli.net

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .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)化史。

起源
 

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .clearfix:after {    

  2.     visibility: hidden;    

  3.     display: block;    

  4.     font-size: 0;    

  5.     content: " ";    

  6.     clear: both;    

  7.     height: 0;    

  8. }    

  9. .clearfix { display: inline-table; }    

  10.     

  11. * 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    

  12. .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)了。
 

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .clearfix:after {    

  2.     visibility: hidden;    

  3.     display: block;    

  4.     font-size: 0;    

  5.     content: " ";    

  6.     clear: both;    

  7.     height: 0;    

  8. }    

  9. * <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 */  

  10. *: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ě)成：
 

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .clearfix:after {    

  2.     visibility: hidden;    

  3.     display: block;    

  4.     font-size: 0;    

  5.     content: " ";    

  6.     clear: both;    

  7.     height: 0;    

  8. }    

  9. .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)行了改良：

終極版一：
 

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .clearfix:after {    

  2.     content:"\200B";    

  3.     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>;    

  4.     height:0;    

  5.     clear:both;    

  6. }    

  7. .clearfix {*zoom:1;}/*IE/7/6*/  

解釋下:content:"\200B";這個(gè)參數(shù)，Unicode字符里有一個(gè)“零寬度空格”，即 U+200B，代替原來(lái)的“.”，可以縮減代碼量。而且不再使用visibility:hidden。

終極版二：
 

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .clearfix:before,.clearfix:after{    

  2.     content:"";    

  3.     display:table;    

  4. }    

  5. .clearfix:after{clear:both;}    

  6. .clearfix{    

  7.     *zoom:1;/*IE/7/6*/  

  8. }  

到此，關(guān)于“CSS中怎么使用clearfix清除浮動(dòng)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)頁(yè)名稱：CSS中怎么使用clearfix清除浮動(dòng)
標(biāo)題URL：http://www.chinadenli.net/article40/ggphho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站