新聞中心
本文向大家描述一下清除CSS float浮動(dòng)的方法,主要包括使用空標(biāo)簽清除浮動(dòng),使用overflow屬性,使用after偽對(duì)象清除浮動(dòng)三種,希望本文介紹對(duì)你有所幫助。

商城網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)!從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作,到程序開發(fā),運(yùn)營維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
清除浮動(dòng)的三種方法
先看一下下面代碼:
viewsourceprint?
- 01
- 07
- 08
- 09
- 10
- 首頁
- 11
- 12
- 我的日志
- 13
- 14
- 我的相冊(cè)
- 15
- 16
- 我的心情
- 17
- 18
- 個(gè)人中心
- 19
- 20
- 21
- 22
這里不是導(dǎo)航的內(nèi)容
頁面顯示如下:
如何解決以上問題呢?唯一的辦法就是清除浮動(dòng)。#p#
清除浮動(dòng)的方法
◆使用空標(biāo)簽清除浮動(dòng)
在需要清楚浮動(dòng)的層里邊添加:
viewsourceprint?
- 1
- 2
- 首頁
- 3
- 我的日志
- 4
- 我的相冊(cè)
- 5
- 我的心情
- 6
- 個(gè)人中心
- 7
- 8
◆使用overflow屬性
此方法有效地解決了通過空標(biāo)簽元素清除浮動(dòng)而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動(dòng)的元素中定義CSS屬性:overflow:auto,即可!overflow:auto;是讓高度自適應(yīng),zoom:1;是為了兼容IE6,也可以用height:1%;的方式來解決,注意,zoom不符合W3C標(biāo)準(zhǔn)。overflow:hidden也可以實(shí)現(xiàn)。
viewsourceprint?
- 1
- 2
- 首頁
- 3
- 我的日志
- 4
- 我的相冊(cè)
- 5
- 我的心情
- 6
- 個(gè)人中心
- 7
◆使用after偽對(duì)象清除浮動(dòng)
after偽對(duì)象非IE瀏覽器支持,所以并不影響到IE/WIN瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。
一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0,否則該元素會(huì)比實(shí)際高出若干像素;
二、content屬性是必須的,但其值可以為空,藍(lán)色理想討論該方法的時(shí)候content屬性的值設(shè)為".",但我發(fā)現(xiàn)為空亦是可以的。
viewsourceprint?
- 1ul.nav:after{display:block;clear:both;content:"";
- visibility:hidden;height:0;}
◆清除浮動(dòng)后效果如下:
使用一下代碼清除浮動(dòng),屢試不爽。
viewsourceprint?
- 1.clearfix:after{content:".";display:block;height:0;
- clear:both;visibility:hidden;}
- 2.clearfix{display:inline-block;}
- 3.clearfix{display:block;}
分享文章:實(shí)例解析清除CSSfloat浮動(dòng)的三種方法
本文路徑:http://fisionsoft.com.cn/article/dpjdpcc.html


咨詢
建站咨詢
