css中的浮動以及清除浮動

標籤：屬性   覆蓋   提高   body   部分   內容   過程   邊框   對象   

　　對於css中的浮動問題,曾經有一段時間我是懵懵懂懂的感覺,對於float這個屬性一直是似懂非懂的趕腳,對於這種讓我們一直懵懵懂懂的知識點,我們就需要找個時間點,仔仔細細的去將它搞懂,從這個過程中我們也會去複習以前的知識,這是真正會讓我們有所提高的一個過程,是所謂溫故而知新.那麼在學習的過程中也看了很多大神的部落格,這裡就來總結一下我個人對於float的理解;

　　css的浮動使我們在布局的時候經常會用到的一個屬性,在大量的使用過程中,我們可能只是一知半解的去使用,或者使用的時候得到了自己想要的結果就絕的OK了,而沒有去探究它真正的實現原理,擁有這種習慣的話,我們終將會為它付出代價,當你在緊急情況下使用它的時候,難道還要去靠猜,靠試嗎?當我們使用兩個div是,因為div是block類型的,這裡有兩個div,我們不去指定寬度,只是給它們一個高度:

　　我們可以看到,block模組的寬度會自動的設定為width為100%,當我們給第二個綠色的div設定屬性為float:left之後,我們會發現,第二個div有了寬度,這時候div就會變得像inline元素那樣去自使用寬度,這也是我們要手動給浮動元素設定一個寬度的原因,那麼如果我們的浮動元素中沒有內容,這時候他就會小時,因為我們浮動的div中沒有內容,所以它現在沒有寬度沒有了高度,所以就從我們當前的頁面中消失了:

　　

　　再來看一個例子,我們有a,b,c三個盒子,他們的寬和高都是100px,在介面中這樣排列著:

　　

　　

　　浮動的元素會脫離我們原本的文檔流,我們可以將文檔流看成是一個一個的積木,這些積木層層疊疊的摞在一塊,這時候其中的一塊被抽了出去,那麼中間空出來的地方就會被填補:我們給中間綠色的b框來一個float:left屬性

　　我們發現b框將我們藍色的框覆蓋了,這時候,我們給b框一個float:right:

　

　　我們可以發現,這時候c框出來了,我們可以看到,b框從我們原先的文檔流中漂浮了出去,那麼他原先的位置造成的空間就有c向上補了上去,那麼我們還有一個疑問,現在b框漂浮了出來,那麼它會飄到哪裡去呢?哪裡才是它的家呢?官方上對於浮動的元素有這樣一句話,浮動的框可以向左或者向右浮動,知道它邊緣碰到了包含框或者另一個浮動框的邊框為止,由於浮動框不在普通的文檔流中,所以文檔的普通流中的塊狀框表現的就行浮動框不存在一樣,

　　我們給c框設定300px寬,a和c寬度為100px

　　

　　從中我們可以看到,當b框左浮動的時候,c框向上補了b框原來的位置,所以b框和c框相互重疊了,但是我們應該也發現一個問題,就是b框雖然是漂浮了出去,但是它並沒有向上進行漂浮,所以這時候我們可能回去認為,浮動的框只是左右進行浮動,並不會向上浮動,這時候我們可以再給c框加一個左浮動,

　　

　　這時候你會發現,c框的左邊框碰到了b框,那麼這樣還不夠直觀的話,我們給a也設定為左浮動:

　　

　　這時候你就會發現,a,b,c三個框排成了一列,這時候我們就可以總結了浮動框的位置了,首先是上下位置,浮動的框上邊的框會在碰到上邊緣或者另一個不浮動的框位置,這也是前邊b,c或漂浮在a下邊的原因,在左右方向上,浮動框會在碰到瀏覽器左右邊緣或者另一個浮動框時停止,如果有不浮動的框,浮動框會將其覆蓋,那麼到這裡呢,我們一直在看的都是浮動框的位置變化,那麼浮動起來的框的寬高會變化嗎?這裡我們設定一個情境,a框寬100px,高度設定,b框在a框中,寬度50px,高度設定為100px,

　　

　　我們可以看到紅色的a框中有一個綠色的b框,紅色框的高度為b框撐了起來,那麼如果我們讓b浮動了起來呢?

　　

　　我們會發現a框不見了,這裡就是我們常說的高度塌陷了,因為b框浮動了起來,這時候a框感受不到了b框的存在,所以a的高度就塌陷了,這時候b框只是相對於其他人不存在,而它自身的高度還是存在的,當我們給a框加入一首詩後,我們會驚奇的發現:

　　

　　這便是很長一段時間讓我不解的地方,我們輸入的文字會像流水一樣環繞浮動著的b框.按著正常的理解,文字應該再b框下邊,這裡的原因就是因為b框浮動了,所以在紅色框的文字把b框當做不存在一樣,但是b框在左浮動的時候左邊緣碰到了包含框,便從空中落了下來,緊靠左邊框,這才會有這種文字環繞的問題,所以說我們在使用浮動的過程中,會出現這樣那樣的問題,使用浮動的時候,我們應該仔細謹慎,

　　有了浮動,我們就該有清除浮動的方法,或者讓後邊的元素框不受前邊浮動框的影響,

　　1,第一種方法就是我們可以在每個浮動的元素上添加一個標籤clear:both;當然還有clear:left;和clear:right;這兩種方式,但是我們需要明白的是,這種清除浮動的方式只是清除了浮動對於擁有該屬性的框的影響,對於清除我們的高度塌陷作用是不大的,

<div class="a" style="  width: 200px;background: red;">    這裡是a框    <div class="b" style=" float: left; width: 100px;height: 100px;background: green;">    </div></div><div class="c" style=" clear:both; width: 100px;height: 100px;background: blue;">    這裡是c框</div>

　　我們可看到,中a框由於b框浮動,而產生了高度塌陷,而c框本該往上去填補b框的空白,但由於c框有屬性clear:both;所以清楚了浮動框對於c框的影響,也就是前邊浮動的b框對於c框來說是沒有浮動的,所以還會是正常的排列順序進行顯示,但是如果a框前邊還有一個左浮動的框:

,

　　黑色的框屬性也是左浮動,我們這時分析一下,紅色的a框由於高度塌陷就剩文字的高度了,而它前邊是一個黑色的浮動框,所以此時由於a框並不浮動,他會緊緊的去填補黑色框的空白,由於綠色框也是左浮動,所以它不會被黑色框覆蓋,而是會左邊框和黑色框對齊,這是l藍色的c框,由於清除了浮動,所以它還按正常的排序進行排列,上端緊靠著綠色的框,

　　2,我們也可以看到上邊那種清除浮動的方式有時候會給我們帶來看著就頭大的問題,對於高度塌陷問題基本是沒有什麼作用的,那麼這時候我們看一下第二種方法,添加屬性overflow:hidden;

　　

<div style="width: 100px;height: 100px;float: left; background: #000;">    第一個框</div><div class="a" style=" overflow: hidden; clear: both;  width: 200px;background: red;">    <div class="b" style=" float: left; width: 100px;height: 100px;background: green;">    </div></div><div class="c" style="  width: 100px;height: 100px;background: blue;">    這裡是c框</div></body></html>

　　

　　看到結果,我們就可說,首先,紅色a框中的clear:both清楚了上邊黑色框的浮動影響,而overflow:hidden;清除了它本身中的高度塌陷問題,overflow:hidden這個屬性的含義是超出的部分隱藏掉,但為什麼會清除了浮動的高度塌陷問題呢?這個要解釋起來是太長太長了,而且我也確實沒有理解透徹,大概的一個理解就是:當元素本身想要進行超出部分隱藏的時候,他自身的有一定的高度,不然你自己沒高度,你還要隱藏你裡邊的元素,這個屬性不就沒用了嗎,所以本著存在便有它存在的道理,我的理解是包含狂會自動的將高度被浮動框撐起來,然後超出的部分再進行隱藏,

　　3,第三種清除浮動的方式是使用after偽對象清除浮動,但是這個方式IE瀏覽器並不支援,所以只適用於非IE瀏覽器中,

　　

  .a:after{            clear: both;            content: ".";            display: block;            height: 0;            visibility: hidden;        }

　　　這樣便能清除a框中浮動元素帶來的影響了

　　4,第四種方法是可以在父元素上設定浮動來消除高度塌陷問題,但是這種方式帶來的弊端就是下邊的元素還要再去添加清除浮動,

總結:　　說了這麼多,覺得浮動是我們能減少使用就減少使用的一個屬性,因為它的坑太多,那麼在寫這篇隨筆之前呢,我就猶豫要不要寫,很多人覺得這是很簡單的,而且看一下就會了,那麼在寫的過程中呢,我發現你看似很簡單的東西,當你想要解釋給別人看的時候,你會發現你所瞭解的並不足以很好的很詳細的去描述,你會發現自己有好多東西都是一知半解,但這也正是我們提高的一個過程,網上關於浮動這個問題有很多大牛寫的都超級好,但我寫這篇更多的是想過個一兩年後,當你自己回頭來看你寫的這些個隨筆的時候,如果你會覺得好好笑,當年寫的這是什麼玩意,那麼我就會說,恭喜你!

 

　　

　　

　　

css中的浮動以及清除浮動