css中的浮動(dòng)以及清除浮動(dòng)
對(duì)于css中的浮動(dòng)問題,曾經(jīng)有一段時(shí)間我是懵懵懂懂的感覺,對(duì)于float這個(gè)屬性一直是似懂非懂的趕腳,對(duì)于這種讓我們一直懵懵懂懂的知識(shí)點(diǎn),我們就需要找個(gè)時(shí)間點(diǎn),仔仔細(xì)細(xì)的去將它搞懂,從這個(gè)過程中我們也會(huì)去復(fù)習(xí)以前的知識(shí),這是真正會(huì)讓我們有所提高的一個(gè)過程,是所謂溫故而知新.那么在學(xué)習(xí)的過程中也看了很多大神的博客,這里就來總結(jié)一下我個(gè)人對(duì)于float的理解;
css的浮動(dòng)使我們?cè)诓季值臅r(shí)候經(jīng)常會(huì)用到的一個(gè)屬性,在大量的使用過程中,我們可能只是一知半解的去使用,或者使用的時(shí)候得到了自己想要的結(jié)果就絕的OK了,而沒有去探究它真正的實(shí)現(xiàn)原理,擁有這種習(xí)慣的話,我們終將會(huì)為它付出代價(jià),當(dāng)你在緊急情況下使用它的時(shí)候,難道還要去靠猜,靠試嗎?當(dāng)我們使用兩個(gè)div是,因?yàn)閐iv是block類型的,這里有兩個(gè)div,我們不去指定寬度,只是給它們一個(gè)高度:
我們可以看到,block模塊的寬度會(huì)自動(dòng)的設(shè)定為width為100%,當(dāng)我們給第二個(gè)綠色的div設(shè)置屬性為float:left之后,我們會(huì)發(fā)現(xiàn),第二個(gè)div有了寬度,這時(shí)候div就會(huì)變得像inline元素那樣去自使用寬度,這也是我們要手動(dòng)給浮動(dòng)元素設(shè)置一個(gè)寬度的原因,那么如果我們的浮動(dòng)元素中沒有內(nèi)容,這時(shí)候他就會(huì)小時(shí),因?yàn)槲覀兏?dòng)的div中沒有內(nèi)容,所以它現(xiàn)在沒有寬度沒有了高度,所以就從我們當(dāng)前的頁(yè)面中消失了:
再來看一個(gè)例子,我們有a,b,c三個(gè)盒子,他們的寬和高都是100px,在界面中這樣排列著:
浮動(dòng)的元素會(huì)脫離我們?cè)镜奈臋n流,我們可以將文檔流看成是一個(gè)一個(gè)的積木,這些積木層層疊疊的摞在一塊,這時(shí)候其中的一塊被抽了出去,那么中間空出來的地方就會(huì)被填補(bǔ):我們給中間綠色的b框來一個(gè)float:left屬性
我們發(fā)現(xiàn)b框?qū)⑽覀兯{(lán)色的框覆蓋了,這時(shí)候,我們給b框一個(gè)float:right:
我們可以發(fā)現(xiàn),這時(shí)候c框出來了,我們可以看到,b框從我們?cè)鹊奈臋n流中漂浮了出去,那么他原先的位置造成的空間就有c向上補(bǔ)了上去,那么我們還有一個(gè)疑問,現(xiàn)在b框漂浮了出來,那么它會(huì)飄到哪里去呢?哪里才是它的家呢?官方上對(duì)于浮動(dòng)的元素有這樣一句話,浮動(dòng)的框可以向左或者向右浮動(dòng),知道它邊緣碰到了包含框或者另一個(gè)浮動(dòng)框的邊框?yàn)橹?由于浮動(dòng)框不在普通的文檔流中,所以文檔的普通流中的塊狀框表現(xiàn)的就行浮動(dòng)框不存在一樣,
我們給c框設(shè)置300px寬,a和c寬度為100px
從上圖中我們可以看到,當(dāng)b框左浮動(dòng)的時(shí)候,c框向上補(bǔ)了b框原來的位置,所以b框和c框相互重疊了,但是我們應(yīng)該也發(fā)現(xiàn)一個(gè)問題,就是b框雖然是漂浮了出去,但是它并沒有向上進(jìn)行漂浮,所以這時(shí)候我們可能回去認(rèn)為,浮動(dòng)的框只是