CSS中Float(浮動)屬性的說明_CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
        Float(浮動)概念也許是CSS中最讓人迷惑的一個概念吧。Float經(jīng)常被錯誤理解,而且因為將上下文元素全部浮動導(dǎo)致的可讀性、可用性問題備受責(zé)難。然而,這些問題的根源并不在于理論本身,而是開發(fā)人員以及瀏覽器對理論的解讀造成的。
        如果你認(rèn)真的去讀一下浮動概念,你會發(fā)現(xiàn)并不像所見的那樣復(fù)雜。大多數(shù)問題都是由于老版本的IE帶來的(我只是猜想)。如果你知道這些bug,你就能避免這些問題。
        讓我們嘗試去解決這些問題并澄清一些以前使用浮動的誤解。我們參考了成打的相關(guān)文章,并選取了最為重要的一些你必須了解的問題。

      What You Should Know About Floats

        “關(guān)于圖文圍繞的實(shí)踐可以追溯到很久很久以前。這也就是為什么從Netscape1.1開始這個功能被引入瀏覽器,以及為什么CSS使用浮動屬性來實(shí)現(xiàn)它。‘Float(浮動)’這個術(shù)語引用自伴隨Netscape1.1一同發(fā)布的‘Additions to HTML 2.0’文檔,描述一個元素浮動至某一側(cè)并停下的表現(xiàn)方式。”
        “浮動元素的定位還是基于正常的文檔流,然后從文檔流中抽出并盡可能遠(yuǎn)的移動至左側(cè)或者右側(cè)。文字內(nèi)容會圍繞在浮動元素周圍。當(dāng)一個元素從正常文檔流中抽出后,仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。”
        “元素浮動后將自動轉(zhuǎn)為塊級元素。該元素可以被移動至當(dāng)前行的左側(cè)或右側(cè)。屬性如下:float: left, float: right or float: none”
        “你應(yīng)該為所有的浮動元素設(shè)定寬度屬性(除非是<img>元素,因其具有隱含的寬度)。如果不設(shè)定寬度,結(jié)果將是不可預(yù)知的。”
        “舉例來說,浮動元素應(yīng)該定義寬度屬性,不論是顯式指定的還是隱含的。另外,它會盡可能的水平的填充容器元素,就像非浮動內(nèi)容那樣,不給其他內(nèi)容空間以圍繞它們。其次,和正常文檔流中的元素不同,浮動元素的垂直邊距(margin)不會疊加。最后,浮動元素可以和臨近在正常文檔流中塊級元素重疊(譯注:浮動元素不占任何正常文檔流空間,所以建議不要理解成重疊,而是騰空浮動的概念。)。”
        “首先我們要牢記的一件事情是,浮動元素只能浮動至左側(cè)或者右側(cè),沒有浮動至中間一說,這是很多新手容易范的錯誤。記住,最基本的規(guī)則,浮動元素只能浮動至兩側(cè)。”
        “當(dāng)我們讓一個元素浮動,它會往右或者往左浮動直至遇到容器的邊緣。如果我們向同一方向再浮動一個元素,它會浮動直至碰到前一個浮動元素的邊緣。如果我們浮動更多的元素,他們將一個挨一個排列,但不久就會空間不足,當(dāng)該行已經(jīng)無法容納更多的浮動元素,則下一個浮動元素會換行繼續(xù)排列。”
        Containing blocks or containing boxes:“容器元素是指包含其他子元素的行級或塊級元素。。。。”   “當(dāng)明確指定時,浮動元素垂直位置由它原先在文檔流中的位置決定,頂端與當(dāng)前行頂端對其。但是水平方向上,它盡可能遠(yuǎn)的向容器元素邊緣移動,但是仍遵循容器元素的填充距離(padding)。同行的行內(nèi)元素則圍繞浮動元素排列。”
        “由于浮動元素不占據(jù)正常文檔流空間,所以浮動元素前后那些未明確指定位置的塊級元素會占據(jù)浮動元素本來應(yīng)該處在的位置,就好像它從來不曾存在過。而浮動元素之后的那行會根據(jù)浮動元素縮小寬度。浮動元素之前的元素則會重新被排列,占據(jù)獨(dú)立的一行。(譯注:ie 和 ff 在這種情況下的表現(xiàn)不盡相同)”
        “如果當(dāng)前行的水平方向上沒有足夠的空間容納浮動元素,則向下一行,直至有能容納該元素的行。”
        “任何浮動元素都不可能超過原來所處文檔留位置的上邊界。浮動元素的頂端必定和當(dāng)前行頂端對齊(或者在沒有當(dāng)前行元素時和前一個塊級元素底部邊緣對齊)。”
        “想要真正理解浮動理論,你必須明白在CSS中什么是行 (line box)。不幸的是,為了解釋什么是行,你必須先明白什么是行級元素。行級元素指的是那些非塊級元素,例如<em>而行是一個邏輯上的概念,是一個虛擬的矩形,包含了組成該行的所有行級元素,其高度至少等于這些行級元素中最高的那個。”
        “如果我們將Div中所有的列都加上 float: left 它們會挨個向左排列,如果我們希望在頁面底部有一個頁腳,并不需要一個最長的列,只要加上 clear: both 就可以了”
        “使用浮動元素包含浮動元素這樣的布局方式有一個潛在的缺點(diǎn),即你的頁面是否能夠一直保持一致的展現(xiàn)效果將取決于瀏覽器的實(shí)現(xiàn)是否保持一致。特別是當(dāng)浮動元素是一個更為復(fù)雜的布局中的一部分的話,將變得更加不堪一擊。”

      Clearing the floats

        “浮動元素之后的元素會自動圍繞該浮動元素。如果你不希望這樣,你可以為這些元素應(yīng)用‘clear’屬性。該屬性有4種設(shè)值:clear: left, clear: right, clear: both or clear: none”
        有很多技巧可以做到清理浮動元素,但不引入額外的無語義標(biāo)簽。下面3種是比較常見的做法: a) 將容器元素一起浮動 b) 在容器元素上使用 overflow: hidden c) 使用:after這樣的css偽類。
        “插入一個清理元素是使容器正確包裹所有浮動元素的標(biāo)準(zhǔn)做法,這樣做具有將容器底部邊緣‘拖拉’以包裹所含元素的效果。”
        “對于基于浮動設(shè)計的布局來說,一個常見的問題就是浮動元素的容器不會自動伸展來包含浮動元素。如果你希望在所有的浮動元素的外面加上邊框(例如,在容器元素上加上邊框),這樣你必須顯示的命令瀏覽器來伸展容器。你可以是用overflow method方法。”
        使用:after 想像一下我們使用:after來插入一個點(diǎn)號,并且設(shè)置它的屬性{clear: both;}。這就是所有你需要做的事情,但是沒有人會接受容器底部有那么一絲空隙,所以我們還要設(shè)置{height: 0;} 和 {visibility: hidden;} 來保證嚴(yán)絲合縫。
        
        

      來源:52CSS//所屬分類:CSS教程/更新時間:2012-06-13
      相關(guān)CSS教程