|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級(jí)文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級(jí)文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 css清除浮動(dòng)是在css布局中經(jīng)?吹降模敲碿ss中該如何清除浮動(dòng)呢?本篇文章將給大家來介紹關(guān)于css清除浮動(dòng)的方法,以及簡單介紹為什么要使用css浮動(dòng)。我們上篇文章css浮動(dòng)是什么意思?css為什么要清除浮動(dòng)?中已經(jīng)說到使用css浮動(dòng)是因?yàn)樵赾ss中一些元素是塊級(jí)元素,他們會(huì)自動(dòng)啟用新的一行,還有另一種內(nèi)聯(lián)元素也就是行內(nèi)元素,它們會(huì)與之前的內(nèi)容保持顯示在“一行”;但是有時(shí)候我們需要改變這種布局方式,這就需要利用css浮動(dòng)來實(shí)現(xiàn)。但是當(dāng)出現(xiàn)“高度塌陷”時(shí)就會(huì)需要清除浮動(dòng)。那么,css清除浮動(dòng)的方法有哪些? 下面我們就來看看css清除浮動(dòng)的四種方法介紹。 css清除浮動(dòng)的方法一: 使用帶clear屬性的空元素 在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>,并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)。亦可使用<br class="clear" />或<hr class="clear" />來進(jìn)行清理。 .news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>說明: 優(yōu)點(diǎn):簡單,代碼少,瀏覽器兼容性好。 缺點(diǎn):需要添加大量無語義的html元素,代碼不夠優(yōu)雅,后期不容易維護(hù)。 css清除浮動(dòng)的方法二: 使用CSS的overflow屬性 給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng),另外在 IE6 中還需要觸發(fā) hasLayout ,例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1。 .news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>說明: 在添加overflow屬性后,浮動(dòng)元素又回到了容器層,把容器高度撐起,達(dá)到了清理浮動(dòng)的效果。 優(yōu)點(diǎn):不存在結(jié)構(gòu)和語義化問題,代碼量極少 缺點(diǎn):內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉,無法顯示需要溢出的元素;04年P(guān)OPO就發(fā)現(xiàn)overflow:hidden會(huì)導(dǎo)致中鍵失效,這是我作為一個(gè)多標(biāo)簽瀏覽控所不能接受的。所以還是不要使用. css清除浮動(dòng)的方法三: 使用鄰接元素處理 什么都不做,給浮動(dòng)元素后面的元素添加clear屬性。 .news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>css清除浮動(dòng)的方法四: 使用CSS的:after偽元素 結(jié)合 :after 偽元素(注意這不是偽類,而是偽元素,代表一個(gè)元素之后最近的元素)和 IEhack ,可以完美兼容當(dāng)前主流的各大瀏覽器,這里的 IEhack 指的是觸發(fā) hasLayout。 給浮動(dòng)元素的容器添加一個(gè)clearfix的class,然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見的塊元素(Block element)清理浮動(dòng)。 .news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 觸發(fā) hasLayout */
zoom: 1;
}
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>說明:通過CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見的空格"020"或點(diǎn)".",并且賦予clear屬性來清除浮動(dòng)。需要注意的是為了IE6和IE7瀏覽器,要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。 最后:關(guān)于上述文章中一些屬性的具體內(nèi)容可以參考css手冊(cè)。 相關(guān)推薦: CSS清除浮動(dòng)常用方法小結(jié)_經(jīng)驗(yàn)交流 css別忘記清除浮動(dòng)clear:both_經(jīng)驗(yàn)交流 CSS中Float(浮動(dòng))相關(guān)技巧文章_經(jīng)驗(yàn)交流 以上就是css清除浮動(dòng)的方法有哪些?css浮動(dòng)清除的四種方法介紹的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!