您現在的位置是:電腦技術吧?>? 編程技術 ??>??清除浮動clearfix,清除浮動??>??正文詳情

清除浮動clearfix,清除浮動

裔才俊2019-11-23 11:01:37 人圍觀
簡介css清除浮動的幾種方法首先,許多年前,我們曾經清除浮動CSS代碼,將內容復制到剪貼板。Clear{Clear:both;line height:0;}現在,您可能在許多舊站點上也看到清除浮動的原理

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

  CSS Code復制內容到剪貼板  .clear{clear:both;line-height:0;}  現在可能還可以在很多老的站點上可以看到這樣的代碼,相當暴力有效的解決浮動的問題。

但是這個用法有一個致命傷,就是每次清除浮動的時候都需要增加一個空標簽來使用。

  這種做法如果在頁面復雜的布局要經常清楚浮動的時候就會產生很多的空標簽,增加了頁面無用標簽,不利于頁面優化。

但是我發現大型網站中 居然還在使用這種清楚浮動的方法。

有興趣的同學可以上他們首頁搜索一下他們的.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 from IE-mac  .clearfix { display: block; }//End hide from IE-mac  解釋一下以上的代碼:  對大多數符合標準的瀏覽器應用第一個聲明塊,目的是創建一個隱形的內容為空的塊來為目標元素清除浮動。

  第二條為clearfix應用 inline-table 顯示屬性,僅僅針對IE/Mac。

利用 * 對 IE/Mac 隱藏一些規則:  height:1% 用來觸發 IE6 下的haslayout。

  重新對 IE/Mac 外的IE應用 block 顯示屬性。

  最后一行用于結束針對 IE/Mac 的hack。

(是不是覺得很坑爹,Mac下還有IE)  起源代碼可能也是很早期的時候了,再往后Mac下的IE5也發展到IE6了,各種瀏覽器開始向W3C這條標準慢慢靠齊了。

所以就有了下面這個寫法出現了。

  CSS Code復制內容到剪貼板  .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 */  IE6 和 IE7 都不支持 :after 這個偽類,因此需要后面兩條來觸發IE6/7的haslayout,以清除浮動。

幸運的是IE8支持 :after 偽類。

因此只需要針對IE6/7的hack了。

  在一個有float 屬性元素的外層增加一個擁有clearfix屬性的div包裹,可以保證外部div的height,即清除浮動元素脫離了文檔流,包圍圖片和文本的 div 不占據空間的問題。

  Jeff Starr 在這里針對IE6/7用了兩條語句來觸發haslayout。

我在想作者為什么不直接用 * 來直接對 IE6/7 同時應用 zoom:1 或者直接就寫成:  CSS Code復制內容到剪貼板  .clearfix:after {  visibility: hidden;  display: block;  font-size: 0;  content: ;  clear: both;  height: 0;  }  .clearfix{*zoom:1;}  但是對于很多同學這種優化程度代碼還是不夠給力,clearfix 發展到現在的兩個終極版。

  重構clearfix浮動  構成Block Formatting Context的方法有下面幾種:  float的值不為none。

  overflow的值不為visible。

  display的值為table-cell, table-caption, inline-block中的任何一個。

  position的值不為relative和static。

  很明顯,float和position不合適我們的需求。

那只能從overflow或者display中選取一個。

  因為是應用了.clearfix和.menu的菜單極有可能是多級的,所以overflow: hidden或overflow: auto也不滿足需求  (會把下拉的菜單隱藏掉或者出滾動條),那么只能從display下手。

  我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何一個  但是display: inline-block會產生多余空白,所以也排除掉。

  剩下的只有table-cell, table-caption,為了保證兼容可以用display: table來使.clearfix形成一個Block Formatting Context  因為display: table會產生一些匿名盒子,這些匿名盒子的其中一個(display值為table-cell)會形成Block Formatting Context。

  這樣我們新的.clearfix就會閉合內部元素的浮動。

  后面又有人對此進行了改良:  終極版一:  CSS Code復制內容到剪貼板  .clearfix:after {  content:200B;  display:block;  height:0;  clear:both;  }  .clearfix {*zoom:1;}/*IE/7/6*/  解釋下:content:200B;這個參數,Unicode字符里有一個零寬度空格,即 U 200B,代替原來的.,可以縮減代碼量。

而且不再使用visibility:hidden。

  終極版二:  CSS Code復制內容到剪貼板  .clearfix:before,.clearfix:after{  content:;  display:table;  }  .clearfix:after{clear:both;}  .clearfix{  *zoom:1;/*IE/7/6*/  }  這兩個終極版代碼都很簡潔,終極版一和二都可以使用,以上代碼都經過測試,大家趕緊用一下吧,如果有什么問題請及時跟我反饋,如果你還停留在clearfix的老代碼的時候就趕緊更新一下代碼吧。

版權聲明:本文由 裔才俊 整理編輯。

原標題:clearfix清除浮動代碼,清除div浮動

轉載注明出處:http://www.dn9ww09s.icu/program/14031.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • office365破解激活,office365在哪里輸入激活碼

    office365破解激活,office365在哪里輸入激活碼 相關圖片word365激活碼密匙Office 365是微軟基于云平臺的Office應用套件。這是一個完整的云辦公室,發布于2011年。易于使用的office 365使用戶能夠隨時隨地高效地進行microsoft365永久激活...

  • 進度PPT,完成進度PPT

    進度PPT,完成進度PPT 相關圖片PPT做進度表有時為了豐富PPT,或是表達PPT無法用視頻表達的復雜內容,在課件中插入視頻是很常見的。但我們怎么能在播放時隨時插入視頻呢?本教程使用ppt 2003進度展示的ppt模板...

  • 修改樣式,更改樣式在哪

    修改樣式,更改樣式在哪 相關圖片word修改樣式在哪CSS樣式是網頁布局的標準。接下來,我們將使用一個練習來調整頁面寬度、更改背景顏色、將背景圖形添加到某個頁面區域以及調整多個文本屬性,所有這些都可以在...

  • win7系統使用技巧,非常實用的win7小技巧

    win7系統使用技巧,非常實用的win7小技巧 相關圖片win7系統優化方法Win7是所有微軟操作系統中非常經典的一個。我相信所有的用戶都想知道使用win7的技巧是什么。接下來,超人軟件編輯器將為您介紹使用win7的技巧。希望你喜歡。保win...

  • H5 案例,H5經典案例

    H5 案例,H5經典案例 相關圖片h5活動案例美容行業的競爭越來越激烈,越來越激烈,女性的心理更是難以猜測。有人說這是因為女人的心看不透,摸不著針。我想說的是,只要你用正確的姿勢,哪怕心里埋得夠深。以...

  • 起點讀書,起點讀書怎么調整字體

    起點讀書,起點讀書怎么調整字體 相關圖片起點用的什么字體起點閱讀是一個非常實用的閱讀軟件。許多孩子喜歡用它讀小說。然而,有時他們覺得字體太小,難以閱讀。那么如何設置閱讀字體的起點呢?接下來,超人軟件編輯...

  • 正則表達式html標簽,正則表達式img標簽

    正則表達式html標簽,正則表達式img標簽 相關圖片正則表達式i抓取網頁的數據(如描述)后,如果網頁按原樣顯示,格式可能會因為包含未關閉的HTML標記而中斷,或者使用更令人費解的HTML標記來擾亂訂閱格式。如果完全刪除其中的h...

  • PDF轉換Excel,怎么將excel轉換為pdf

    PDF轉換Excel,怎么將excel轉換為pdf 相關圖片免費pdf轉excel轉換器最近,許多合作伙伴報告說,PDF轉換成excel后,文件變成了空白。那么當PDF轉換成excel后變成空白時會發生什么呢?現在,超人軟件將解釋如何將PDF轉換成電腦pdf怎么...

  • win7系統cf怎么全屏,cf全屏設置win7系統

    win7系統cf怎么全屏,cf全屏設置win7系統 相關圖片win10cf怎么調全屏對于很多CF玩家來說,如果你能完全屏蔽CF游戲,你可以玩得更開心。如何在win7中設置CF全屏?接下來,超人軟件將介紹在win7中設置CF全屏的方法,win7玩穿越火線不能全...

  • ifelse語句的用法,if語句的用法

    ifelse語句的用法,if語句的用法 相關圖片break語句的用法很多朋友經常問關于flash中ActionScript語句的用法。一些非常簡單的命令可以實現一些功能。現在我將解釋flash 1中一些常用動作語句的基本用法。轉case語句用法舉例說明...

熱評文章

  • 浙工院app,i浙工院app

    浙工院app,i浙工院app 相關圖片i浙工院閃退浙江工學院是浙江工程學院為讓新生更清楚地了解學校動態而推出的應用程序。不過,也有不少小伙伴表示,開張后不會使用。我怎么用?接下來,超人軟件編輯將向您介紹...

  • 特效濾鏡,特效相機

    特效濾鏡,特效相機 相關圖片濾鏡教程步驟1:在焰火中創建一個新文件,大小由自己決定。我在這里建的是(531*433)。背景為黑色,輸入字體a(字體為宋體),顏色為(白色),選擇字體a,然后將字體轉faceu 變老...

  • ppt怎么轉換成視頻mp4,ppt文件怎么轉換成視頻文件

    ppt怎么轉換成視頻mp4,ppt文件怎么轉換成視頻文件 相關圖片ppt怎么做成視頻形式有時當設計ppt文件時,更容易以視頻格式顯示它們。那么你知道如何將PPT文件導出到視頻中嗎?把PPT轉換成視頻格式有點高嗎?其實,很簡單!一。單擊軟件并打開...

  • 網易云音樂電臺怎么關閉,網易云音樂怎么關閉私人電臺

    網易云音樂電臺怎么關閉,網易云音樂怎么關閉私人電臺 相關圖片網易云如何關閉電臺近日,不少網易云音樂用戶反映,不知道如何刪除該電臺。接下來,超人軟件編輯器將為您介紹網易云音樂站的刪除方法。感興趣的朋友,一起來了解一下網易云音...

  • html文件用什么打開,什么是html文件

    html文件用什么打開,什么是html文件 相關圖片手機打開html文件工具如何打開HTML文件?默認情況下,我們用IE瀏覽器打開它。最可能的原因是您沒有連接到Internet站點有問題,可能是在地址中鍵入錯誤。您可以嘗試以下操作:檢查h...

  • 桌面管理器已停止工作,桌面窗口管理器

    桌面管理器已停止工作,桌面窗口管理器 相關圖片桌面窗口管理器關不掉最近,很多win7用戶向小編反映,他們的電腦總是提示桌面窗口管理器已經停止工作。所以,當我在Windows7中提醒您桌面窗口管理器已經停止工作時,應該怎么做?...

  • 文本顏色,文本顏色如何設置

    文本顏色,文本顏色如何設置 相關圖片強調文字顏色1CSS可以通過修改規則來改變頁面或部分的字體、顏色和大小。可以說是一鍵變!更改字體1。單擊“設計”按鈕切換到“設計”視圖2。在CSS樣式面板中,雙擊body規則強調文...

  • 摩拜單車騎行范圍,摩拜騎行

    摩拜單車騎行范圍,摩拜騎行 相關圖片摩拜單車怎么關鎖說起共享單車,摩拜單車不遑多讓的是其大佬。近日,摩拜單車攜手眾安向用戶發放了千萬騎行禮包。那么摩拜單車騎行險怎么領取呢?接下來,超人軟件小編就為大家...

  • flash聲音同步,flash怎么設置聲音同步

    flash聲音同步,flash怎么設置聲音同步 相關圖片flash聲音編輯方法1導入聲音文件,建立聲音層,打開聲音層第一幀的聲音面板,選擇要使用的聲音文件,將聲音同步屬性設置為數據流,用0個周期估計聲音層使用的幀數,幀數=播放時間...

  • 百度貼吧昵稱大全,百度貼吧的昵稱那里換

    百度貼吧昵稱大全,百度貼吧的昵稱那里換 相關圖片百度貼吧id與name不符說起百度的昵稱,我相信這是很多人的黑色歷史!現場,百度官方給我們帶來了修改昵稱的機會。那么如何修改百度貼吧的昵稱呢?接下來,超人軟件編輯將介紹如...

關注微信

变脸官网查询