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