真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

為什么需要css的清理浮動(dòng)及其作用是什么

今天就跟大家聊聊有關(guān)為什么需要css的清理浮動(dòng)及其作用是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。

讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、邳州網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、為什么會(huì)出現(xiàn)浮動(dòng)?

浮動(dòng)(float)產(chǎn)生的最根本的原因是為了實(shí)現(xiàn)文字環(huán)繞效果;后來(lái)有人發(fā)現(xiàn)用它來(lái)做布局挺不錯(cuò)的,可以彌補(bǔ)傳統(tǒng)布局上的一些不足,挺方便的。

二、為什么要清除浮動(dòng),css清理浮動(dòng)有什么作用?

浮動(dòng)(float)可以控制浮動(dòng)框左右移動(dòng),直到遇到另一個(gè)浮動(dòng)框或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流,當(dāng)元素浮動(dòng)之后,不會(huì)影響塊級(jí)元素的布局,只會(huì)影響內(nèi)聯(lián)元素布局。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候,此時(shí)就會(huì)出現(xiàn)“高度塌陷”:為什么需要css的清理浮動(dòng)及其作用是什么

上圖中父元素?fù)伍_(kāi)的高度是padding帶來(lái)的效果,父元素沒(méi)有設(shè)置高度。

在父元素沒(méi)有設(shè)置高度的情況下:

  • 如果父元素里的子元素沒(méi)有設(shè)置浮動(dòng),那么父元素的高也會(huì)自動(dòng)被撐開(kāi)的,出現(xiàn)高度值;

  • 如果父元素里的子元素設(shè)置了浮動(dòng),那么父元素的高就不會(huì)自動(dòng)被撐開(kāi)的,也就沒(méi)有高度值。

顯然這樣設(shè)置浮動(dòng)后出現(xiàn)了一些問(wèn)題,比如:

  1. 父元素的margin受到影響,無(wú)法實(shí)現(xiàn)上下左右居中,

  2. 若沒(méi)有給父元素設(shè)置高度,浮動(dòng)后父元素的高度沒(méi)有被撐開(kāi),那么父元素就不會(huì)在顯示屏上顯示。

實(shí)例說(shuō)明(背景色)

沒(méi)有清除浮動(dòng):

為什么需要css的清理浮動(dòng)及其作用是什么

清除浮動(dòng)后:

為什么需要css的清理浮動(dòng)及其作用是什么

三、怎樣清除浮動(dòng)

下面介紹css清除浮動(dòng)的幾個(gè)方法(實(shí)現(xiàn)上圖效果):

1.使用帶clear屬性的空元素

使用空標(biāo)簽清除浮動(dòng):在需要清除浮動(dòng)的父級(jí)元素內(nèi)部的所有浮動(dòng)元素后添加一個(gè)空標(biāo)簽(理論上可以是任何標(biāo)簽,但常用

)清除浮動(dòng),并為其定義CSS代碼clear:both。

代碼實(shí)例:



	
		
		
		
	
	
		
left
right

優(yōu)點(diǎn):簡(jiǎn)單,代碼少,瀏覽器兼容性好。

缺點(diǎn):需要添加大量無(wú)語(yǔ)義的html元素,代碼不夠優(yōu)雅,后期不容易維護(hù)。

2.使用CSS的overflow屬性

使用overflow清除浮動(dòng):只需在需要清除浮動(dòng)的元素中定義CSS代碼overflow:auto或overflow:hidden即可。

代碼實(shí)例:



	
		
		
		
	
	
		
left
right

優(yōu)點(diǎn):不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題,代碼量極少

缺點(diǎn):內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉,無(wú)法顯示需要溢出的元素

3.使用CSS的:after偽元素

對(duì)父元素使用:after偽元素,設(shè)置display:table

display:table 使生成的元素以塊級(jí)表格顯示,占滿剩余空間。

通過(guò)content: " "生成內(nèi)容作為最后一個(gè)元素,至于content里面是什么都是可以的,CSS經(jīng)典的是 content:".",有些版本可能content里面內(nèi)容為空。

代碼實(shí)例:



	
		
		
		
	
	
		
left
right

看完上述內(nèi)容,你們對(duì)為什么需要css的清理浮動(dòng)及其作用是什么有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。


本文題目:為什么需要css的清理浮動(dòng)及其作用是什么
網(wǎng)頁(yè)URL:http://weahome.cn/article/ijsggg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部