唐家三少,绝色狂妃仙魅小说,穿越小说排行榜

主頁 > 知識庫 > CSS中Float（浮動）相關技巧文章

CSS中Float（浮動）相關技巧文章

Float（浮動）概念也許是CSS中最讓人迷惑的一個概念吧。Float經常被錯誤理解，而且因為將上下文元素全部浮動導致的可讀性、可用性問題備受責難。然而，這些問題的根源并不在于理論本身，而是開發(fā)人員以及瀏覽器對理論的解讀造成的。

　　如果你認真的去讀一下浮動概念，你會發(fā)現(xiàn)并不像所見的那樣復雜。大多數(shù)問題都是由于老版本的IE帶來的（我只是猜想）。如果你知道這些bug，你就能避免這些問題。

　　讓我們嘗試去解決這些問題并澄清一些以前使用浮動的誤解。我們參考了成打的相關文章，并選取了最為重要的一些你必須了解的問題。

What You Should Know About Floats
------------------------------------------------------------------------------------------------------------

　　“關于圖文圍繞的實踐可以追溯到很久很久以前。這也就是為什么從Netscape1.1開始這個功能被引入瀏覽器，以及為什么CSS使用浮動屬性來實現(xiàn)它?！瓼loat(浮動)'這個術語引用自伴隨Netscape1.1一同發(fā)布的‘Additions to HTML 2.0'文檔，描述一個元素浮動至某一側并停下的表現(xiàn)方式?！?

　　“浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間?！?nbsp;

　　“元素浮動后將自動轉為塊級元素。該元素可以被移動至當前行的左側或右側。屬性如下：float: left, float: right or float: none”

　　“你應該為所有的浮動元素設定寬度屬性（除非是＜img＞元素，因其具有隱含的寬度）。如果不設定寬度，結果將是不可預知的?！?

　　“舉例來說，浮動元素應該定義寬度屬性，不論是顯式指定的還是隱含的。另外，它會盡可能的水平的填充容器元素，就像非浮動內容那樣，不給其他內容空間以圍繞它們。其次，和正常文檔流中的元素不同，浮動元素的垂直邊距(margin)不會疊加。最后，浮動元素可以和臨近在正常文檔流中塊級元素重疊（譯注：浮動元素不占任何正常文檔流空間，所以建議不要理解成重疊，而是騰空浮動的概念。）。”

　　“首先我們要牢記的一件事情是，浮動元素只能浮動至左側或者右側，沒有浮動至中間一說，這是很多新手容易范的錯誤。記住，最基本的規(guī)則，浮動元素只能浮動至兩側。”

　　“當我們讓一個元素浮動，它會往右或者往左浮動直至遇到容器的邊緣。如果我們向同一方向再浮動一個元素，它會浮動直至碰到前一個浮動元素的邊緣。如果我們浮動更多的元素，他們將一個挨一個排列，但不久就會空間不足，當該行已經無法容納更多的浮動元素，則下一個浮動元素會換行繼續(xù)排列?！?nbsp;

　　Containing blocks or containing boxes：“容器元素是指包含其他子元素的行級或塊級元素。。。?！?nbsp;　

　　“當明確指定時，浮動元素垂直位置由它原先在文檔流中的位置決定，頂端與當前行頂端對其。但是水平方向上，它盡可能遠的向容器元素邊緣移動，但是仍遵循容器元素的填充距離(padding)。同行的行內元素則圍繞浮動元素排列?！?nbsp;

　　“由于浮動元素不占據(jù)正常文檔流空間，所以浮動元素前后那些未明確指定位置的塊級元素會占據(jù)浮動元素本來應該處在的位置，就好像它從來不曾存在過。而浮動元素之后的那行會根據(jù)浮動元素縮小寬度。浮動元素之前的元素則會重新被排列，占據(jù)獨立的一行。（譯注：ie 和 ff 在這種情況下的表現(xiàn)不盡相同）”

　　“如果當前行的水平方向上沒有足夠的空間容納浮動元素，則向下一行，直至有能容納該元素的行?！?nbsp;

　　“任何浮動元素都不可能超過原來所處文檔留位置的上邊界。浮動元素的頂端必定和當前行頂端對齊（或者在沒有當前行元素時和前一個塊級元素底部邊緣對齊）?！?

　　“想要真正理解浮動理論，你必須明白在CSS中什么是行 (line box)。不幸的是，為了解釋什么是行，你必須先明白什么是行級元素。行級元素指的是那些非塊級元素，例如＜em＞而行是一個邏輯上的概念，是一個虛擬的矩形，包含了組成該行的所有行級元素，其高度至少等于這些行級元素中最高的那個?！?nbsp;

　　“如果我們將Div中所有的列都加上 float: left 它們會挨個向左排列，如果我們希望在頁面底部有一個頁腳，并不需要一個最長的列，只要加上 clear: both 就可以了”

　　“使用浮動元素包含浮動元素這樣的布局方式有一個潛在的缺點，即你的頁面是否能夠一直保持一致的展現(xiàn)效果將取決于瀏覽器的實現(xiàn)是否保持一致。特別是當浮動元素是一個更為復雜的布局中的一部分的話，將變得更加不堪一擊?！?

Clearing the floats
------------------------------------------------------------------------------------------------------------

　　“浮動元素之后的元素會自動圍繞該浮動元素。如果你不希望這樣，你可以為這些元素應用‘clear'屬性。該屬性有4種設值：clear: left, clear: right, clear: both or clear: none”

　　有很多技巧可以做到清理浮動元素，但不引入額外的無語義標簽。下面3種是比較常見的做法： a) 將容器元素一起浮動 b) 在容器元素上使用 overflow: hidden c) 使用:after這樣的css偽類。

　　“插入一個清理元素是使容器正確包裹所有浮動元素的標準做法，這樣做具有將容器底部邊緣‘拖拉'以包裹所含元素的效果?！?nbsp;

　　“對于基于浮動設計的布局來說，一個常見的問題就是浮動元素的容器不會自動伸展來包含浮動元素。如果你希望在所有的浮動元素的外面加上邊框（例如，在容器元素上加上邊框），這樣你必須顯示的命令瀏覽器來伸展容器。你可以是用overflow method方法?！?nbsp;

　　使用:after 想像一下我們使用:after來插入一個點號，并且設置它的屬性{clear: both;}。這就是所有你需要做的事情，但是沒有人會接受容器底部有那么一絲空隙，所以我們還要設置{height: 0;} 和 {visibility: hidden;} 來保證嚴絲合縫。

您可能感興趣的文章:

javascript css styleFloat和cssFloat
javascript css float屬性的特殊寫法
css 跨瀏覽器實現(xiàn)float:center
javascript下操作css的float屬性的特殊寫法
css position: absolute、relative詳解
CSS定位中Positoin、absolute、Relative的一些研究
relative absolute無法沖破的等級問題解決
Div CSS absolute與relative的區(qū)別小結
position:relative/absolute無法沖破的等級
解決rs.absolutepage=-1的問題
詳細分析css float 屬性以及position:absolute 的區(qū)別

標簽：陽泉南充東莞濱州海東遼源邯鄲喀什

巨人網絡通訊聲明：本文標題《CSS中Float（浮動）相關技巧文章》，本文關鍵詞 CSS,中,Float,浮動,相關,技巧,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。

濮阳杆衣贸易有限公司

CSS中Float（浮動）相關技巧文章