浮動(dòng)的運(yùn)用以及清除浮動(dòng)帶來(lái)的影響

《浮動(dòng)的運(yùn)用以及清除浮動(dòng)帶來(lái)的影響》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫(kù)。

1、讓每一名學(xué)員高薪就業(yè)www.itsource.cn浮動(dòng)的運(yùn)用以及清除浮動(dòng)帶來(lái)的影響浮動(dòng)對(duì)于大多數(shù)初學(xué)者來(lái)說(shuō)都是一個(gè)不容忽視的難點(diǎn)，有些初學(xué)者光知道浮動(dòng)而不知道浮動(dòng)的真正意義。下面我們看看到底是怎么回事。1、浮動(dòng)創(chuàng)建初衷在浮動(dòng)還沒出現(xiàn)的時(shí)候，當(dāng)時(shí)我們的網(wǎng)頁(yè)排版還處于一個(gè)蠻荒的時(shí)代，整個(gè)網(wǎng)頁(yè)中有一兩張圖片出現(xiàn)都很不錯(cuò)了，而且還是那種圖片一行文字一行的排版，如下圖：如果你想布局成左邊圖片右邊文字或者布局成我們平時(shí)做筆記的方式，這是候浮動(dòng)就出現(xiàn)了。所以浮動(dòng)創(chuàng)建的最初目的，就是為了解決文字環(huán)繞效果，聽起來(lái)來(lái)有點(diǎn)抽象，那具體是什么呢。我們看看下面這張圖：讓每一名學(xué)員高薪就業(yè)www.itsource.c

2、n究竟浮動(dòng)后是怎樣造成這種現(xiàn)象的呢，我們看看下面這兩張圖就知道了，如圖下：讓每一名學(xué)員高薪就業(yè)www.itsource.cn浮動(dòng)最初創(chuàng)建的時(shí)候是為了解決文字環(huán)繞效果，而文字環(huán)繞效果會(huì)對(duì)父元素的高度造成破壞，從而塌陷。簡(jiǎn)而言之：浮動(dòng)具有破壞性，導(dǎo)致父元素高度塌陷。而我們常常認(rèn)為浮動(dòng)造成父元素高度塌陷是一種bug，這里要告訴大家：這不是bug，而是標(biāo)準(zhǔn)。2、浮動(dòng)實(shí)際開發(fā)中的運(yùn)用：通常我們要么左浮動(dòng)，要么右浮動(dòng)讓每一名學(xué)員高薪就業(yè)www.itsource.cn讓每一名學(xué)員高薪就業(yè)www.itsource.cn3、清除浮動(dòng)：我們通常都在說(shuō)清除浮動(dòng)，其實(shí)應(yīng)該是清除浮動(dòng)所帶來(lái)的影響。常見的清除浮動(dòng)的三

3、種方式：1）在緊接著浮動(dòng)框的后面新建一個(gè)div然后引入樣式clear:both代碼：效果：讓每一名學(xué)員高薪就業(yè)www.itsource.cn注意：在頁(yè)面中增加冗余標(biāo)簽，違背了語(yǔ)義網(wǎng)的原則，對(duì)后期獲取元素也增加了不必要的對(duì)象2）在父級(jí)元素中引入overflow:hidden,這種方式有前提條件：必須所有的子元素都浮動(dòng)父元素不設(shè)置高度代碼：效果：讓每一名學(xué)員高薪就業(yè)www.itsource.cn注意：一旦子元素的大小超過(guò)父容器的大小，就會(huì)出顯示問(wèn)題3）在父元素中使用:after偽選擇符，就可以在父容器的尾部自動(dòng)創(chuàng)建一個(gè)子元素代碼："content:"020";"是在父容器的結(jié)尾處放一個(gè)空白字符

4、，"height:0;"是讓這個(gè)這個(gè)空白字符不顯示出來(lái)，"display:block;clear:both;"是確保這個(gè)空白字符是非浮動(dòng)的獨(dú)立區(qū)塊。效果：讓每一名學(xué)員高薪就業(yè)www.itsource.cn具體用哪種方式清除浮動(dòng)所帶來(lái)的影響根據(jù)情況而定。