CSS清除浮動常用方法小結(jié)
更新時間:2008年03月30日 12:53:01 作者:
使用div+css(姑且這樣叫,雖然我也不喜歡,但是叫什么呢?)布局的好處不用多說,經(jīng)常性地會使用到float,那么清除浮動就是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認(rèn)為是書寫CSS的良好習(xí)慣之一。
常用的清除浮動的方法有以下三種。
此為未清除浮動源代碼,運行代碼無法查看到父級元素淺黃色背景。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1、使用空標(biāo)簽清除浮動。我用了很久的一種方法,空標(biāo)簽可以是div標(biāo)簽,也可以是P標(biāo)簽。我習(xí)慣用<P>,夠簡短,也有很多人用<hr>,只是需要另外為其清除邊框,但理論上可以是任何標(biāo)簽。這種方式是在需要清除浮動的父級元素內(nèi)部的所有浮動元素后添加這樣一個標(biāo)簽清楚浮動,并為其定義CSS代碼:clear:both。此方法的弊端在于增加了無意義的結(jié)構(gòu)元素。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
2、使用overflow屬性。此方法有效地解決了通過空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性:overflow:auto,即可!"zoom:1"用于兼容IE6。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
3、使用after偽對象清楚浮動。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0,否則該元素會比實際高出若干像素;二、content屬性是必須的,但其值可以為空,藍(lán)色理想討論該方法的時候content屬性的值設(shè)為".",但我發(fā)現(xiàn)為空亦是可以的。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
此三種方法皆有一定弊端,使用時應(yīng)擇優(yōu)選擇,比較之下第二種方法更為可取。以上方法,并非原創(chuàng),皆來源于網(wǎng)絡(luò),在此小作整理,原作者保留所有權(quán)利。
此為未清除浮動源代碼,運行代碼無法查看到父級元素淺黃色背景。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1、使用空標(biāo)簽清除浮動。我用了很久的一種方法,空標(biāo)簽可以是div標(biāo)簽,也可以是P標(biāo)簽。我習(xí)慣用<P>,夠簡短,也有很多人用<hr>,只是需要另外為其清除邊框,但理論上可以是任何標(biāo)簽。這種方式是在需要清除浮動的父級元素內(nèi)部的所有浮動元素后添加這樣一個標(biāo)簽清楚浮動,并為其定義CSS代碼:clear:both。此方法的弊端在于增加了無意義的結(jié)構(gòu)元素。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
2、使用overflow屬性。此方法有效地解決了通過空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性:overflow:auto,即可!"zoom:1"用于兼容IE6。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
3、使用after偽對象清楚浮動。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0,否則該元素會比實際高出若干像素;二、content屬性是必須的,但其值可以為空,藍(lán)色理想討論該方法的時候content屬性的值設(shè)為".",但我發(fā)現(xiàn)為空亦是可以的。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
此三種方法皆有一定弊端,使用時應(yīng)擇優(yōu)選擇,比較之下第二種方法更為可取。以上方法,并非原創(chuàng),皆來源于網(wǎng)絡(luò),在此小作整理,原作者保留所有權(quán)利。
您可能感興趣的文章:
相關(guān)文章
用iframe margin實現(xiàn)調(diào)用其他網(wǎng)頁的某一區(qū)域的方法
用iframe margin實現(xiàn)調(diào)用其他網(wǎng)頁的某一區(qū)域的方法...2007-12-12幾乎被設(shè)計師遺忘了的標(biāo)簽fieldset legend
幾乎被設(shè)計師遺忘了的標(biāo)簽fieldset legend...2007-11-11HTTP與HTTPS超文本傳輸協(xié)議的區(qū)別是什么
隨著越來越多的網(wǎng)站使用HTTPS加密,現(xiàn)在HTTPS的使用已經(jīng)成了硬性要求了。雖然說https是http的安全版,但兩者還是有不少區(qū)別的。本文從https、http的概念和原理入手,講解他們的不同,讓讀者朋友能夠真正理解。2022-12-12css也瘋狂! 用background 插入flash播放器
css也瘋狂! 用background 插入flash播放器...2007-01-01