float 是 css 的定位屬性。 在傳統的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環繞”。在網頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是一個明顯的不同。絕對定位的頁面元素被從網頁流里面移除了，就像印刷布局里面的文本框被設置為無視頁面環繞一樣。絕對定位的元素不會 影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。 像這樣在一個元素上用CSS設置浮動： [task]#sidebar { float: right; } [/task] fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None (默認的) 使元素不浮動，Inherit 將會從父級元素獲取float值。 Float的用處 除了簡單的在圖片周圍包圍文字，浮動可用于創建全部網頁布局。Float對小型的布局同樣有用。例如頁面中的這個小區域。如果我們在我們的小頭像圖片上使用Float，當調整圖片大小的時候，盒子里面的文字也將自動調整位置：同樣的布局可以通過在外容器使用相對定位，然后在頭像上使用絕對定位來實現。這種方式中，文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。 清除Float 清除(clear)是浮動(float)的相關屬性.一個設置了清除Float的元素不會如浮動所設置的一樣，向上移動到Float元素的邊界，而是會忽視浮動向下移動。要解決這個問題，可以在頁腳(footer)上清除浮動，以使頁腳(footer)待在浮動元素的下面。 [task]#footer { clear: both; } [/task] 清 除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚一個方向的浮動。none 是默認值，只在需要移除已指定的清除值時用到。inherit 應該時第五個值，不過很奇怪的是 IE 不支持(這個不奇怪吧，IE 從來都這么特立獨行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。 偉大的塌陷 使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是一個很重要的問題。塌陷的直觀對立面更不好，看看下面的情況：當上面的塊級元素自動擴展以適應浮動元素時，段落間的文本流中會出現非自然的空白換行，而且沒有有效的方法來修正這個問題。對于這種情況，設計師的抱怨會更甚于對塌陷的抱怨。為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之后，容器結束之前來清除浮動。 清除浮動的技術 如果你很明確的知道接下來的元素會是什么，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不添加額外的元素也使得它有良好的語義性。當然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。 空div方法從字面來看，是一個空的 div。有時可能會用或者一些其他元素，但是 div 是最常用的，因為它沒有瀏覽器默認樣式；沒有特殊功能，而且一般不會被 css 樣式化。這個方法因為只是為了表現，對頁面沒有上下文涵義而被純語義論者嘲笑。誠然，從嚴格的角度來說他們是對的，但是這個方法有效而且沒有任何傷害。overflow 方法在父元素上設置 overflow 這個 css 屬性。如果父元素的這個屬性設置為 auto 或者 hidden，父元素就會擴展以包含浮動。這個方法有著較好的語義性，因為他不需要額外元素。但是，如果需要增加一個新的 div 來使用這個方法，其實就和空 div 方法一樣沒有語義了。而且要記住，overflow屬性不是為了清除浮動而定義的。要小心不要覆蓋住內容或者觸發了不需要的滾動條。 簡單清除 方法使用了一個聰明的css 偽選擇符(:after)來清除浮動。比起在父元素上設置overflow，只需要給它增加一個額外的類似于”clearfix”的類。這個類使用如下css: [task].clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;} [/task] 這會在清除浮動的父元素之后應用一點看不見的內容。這不是全部內容，還需要一些額外的代碼來適應那些老舊的瀏覽器。不同的情況需要不同的浮動清除方法。以一個具有不同樣式塊的網格為例。為了從視覺上較好的把相似的塊聯系起來，需要在必要的地方開啟新行，這里是顏色改變的地方。如果每個顏色組都有一個父元素的話，我們可以使用 overflow 或者 簡單清除方法。或者，在每組之間用一個空div方法。額外的 div 之前并不存在，可以自己試試來看看哪個方法好。 浮動的問題 浮動因脆弱而飽受詬病。大多數的脆弱性來自于 IE6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支持 IE6 了，你也可以不關注它了。不過對于那些要關注的人來說，這里有些大概。 推倒是浮動元素內的元素（大多是圖片）比浮動元素本身寬造成的現象。大多數的瀏覽器會在浮動之外渲染圖片，但是不會有伸出來的部分影響其他布局。IE 會擴展浮動來包含圖片，精彩大幅度地影響布局。一個普遍的例子是突破伸出主內容之外把側欄推到下面。 快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來切除多余的部分。 雙倍邊距bug處理 IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設置外邊距(margin)，會引發雙倍邊距。快速修正：給浮動設置 display:inline; 而且不用擔心，它依然是塊級元素。 3像素間距是指挨著浮動元素的文本會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場一樣。快速修正：在受影響的文本上設置寬度或高度。IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。快速修正：用父元素的底內補白(padding)代替。“關于圖文圍繞的實踐可以追溯到很久很久以前。這也就是為什么從Netscape1.1開始這個功能被引入瀏覽器，以及為什么CSS使用浮動屬性來實現它。 ‘Float(浮動)’這個術語引用自伴隨Netscape1.1一同發布的‘Additions to HTML 2.0’文檔，描述一個元素浮動至某一側并停下的表現方式。”[Containing Floats]“浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該 元素并填補他原先的空間。” [Float Positioning]“元素浮動后將自動轉為塊級元素。該元素可以被移動至當前行的左側或右側。屬性如下： [task]float: left,float: right or float: none”[Floatutorial: Float Basics] [/task] “你應該為所有的浮動元素設定寬度屬性（除非是＜img＞元素，因其具有隱含的寬度）。如果不設定寬度，結果將是不可預知的。 [Floatutorial: Float Basics],舉例來說，浮動元素應該定義寬度屬性，不論是顯式指定的還是隱含的。另外，它會盡可能的水平的填充容器元素，就像非浮動內容那樣，不給其他內容空間以圍繞它們。其次，和正常文檔流中的元素不同，浮動元素的垂直邊距(margin)不會疊加。最后，浮動元素可以和臨近在正常文檔流中塊級元素重疊（ 譯注：浮動元素不占任何正常文檔流空間，所以建議不要理解成重疊，而是騰空浮動的概念。 [CSS Positioning: Floats],首先我們要牢記的一件事情是，浮動元素只能浮動至左側或者右側，沒有浮動至中間一說，這是很多新手容易范的錯誤。記住，最基本的規則，浮動元素只能浮動至兩側。 [Float Layouts],當我們讓一個元素浮動，它會往右或者往左浮動直至遇到容器的邊緣。如果我們向同一方向再浮動一個元素，它會浮動直至碰到前一個浮動元素的邊緣。如果我們浮動更多的元素，他們將一個挨一個排列，但不久就會空間不足，當該行已經無法容納更多的浮動元素，則下一個浮動元素會換行繼續排列。 Containing blocks or containing boxes：“容器元素是指包含其他子元素的行級或塊級元素。。。。 [Floatutorial],當明確指定時，浮動元素垂直位置由它原先在文檔流中的位置決定，頂端與當前行頂端對其。但是水平方向上，它盡可能遠的向容器元素邊緣移動，但是仍遵循容器元素的填充距離(padding)。同行的行內元素則圍繞浮動元素排列。 [CSS Positioning: Floats],由于浮動元素不占據正常文檔流空間，所以浮動元素前后那些未明確指定位置的塊級元素會占據浮動元素本來應該處在的位置，就好像它從來不曾存在過。而浮動元素之后的那行會根據浮動元素縮小寬度。浮動元素之前的元素則會重新被排列，占據獨立的一行。（譯注：ie 和 ff 在這種情況下的表現不 盡相同） [W3C Visual Formatting Model]，如果當前行的水平方向上沒有足夠的空間容納浮動元素，則向下一行，直至有能容納該元素的行。” [Floatutorial: Float Basics],任何浮動元素都不可能超過原來所處文檔留位置的上邊界。浮動元素的頂端必定和當前行頂端對齊（或 者在沒有當前行元素時和前一個塊級元素底部邊緣對齊）。 [Float Layouts]想要真正理解浮動理論，你必須明白在CSS中什么是行 (line box)。不幸的是，為了解釋什么是行，你必須先明白什么是行級元素。行級元素指的是那些非塊級元素，例如＜em＞而行是一個邏輯上的概念，是一個虛擬的矩形，包含了組成該行的所有行級元素，其高度至少等于這些行級元素中最高的那個。 [Float Layouts],如果我們將Div中所有的列都加上 float: left 它們會挨個向左排列，如果我們希望在頁面底部有一個頁腳，并不需要一個最長的列，只要加上 clear: both 就可以了。 [Float Layouts]，使用浮動元素包含浮動元素這樣的布局方式有一個潛在的缺點，即你的頁面是否能夠一直保持一致的展現效果將取決于瀏覽器的實現是否保持一致。特別是當浮動元素是一個更為復雜的布局中的一部分的話，將變得更加不堪一擊。 Clearing the floats ------------------------------------------------------------------------------------- “浮動元素之后的元素會自動圍繞該浮動元素。如果你不希望這樣，你可以為這些元素應用‘clear’屬性。該屬性有4種設值：clear: left, clear: right, clear: both or clear: none”[Floats and “clear”]。 有很多技巧可以做到清理浮動元素，但不引入額外的無語義標簽。下面3種是比較常見的做法： a) 將容器元素一起浮動 b) 在容器元素上使用 overflow: hidden c) 使用:after這樣的css偽類。 [How toclear CSS floats without extra markup] 插入一個清理元素是使容器正確包裹所有浮動元素的標準做法，這樣做具有將容器底部邊緣‘拖拉’以包裹所含元素的效果。 [How To Clear Floats Without Structural Markup] “對于基于浮動設計的布局來說，一個常見的問題就是浮動元素的容器不會自動伸展來包含浮動元素。如果你希望在所有的浮動元素的外面加上邊框（例如，在容器元素上加上邊框），這樣你必須顯示的命令瀏覽器來伸展容器。你可以是用overflow method方法。” 使用:after 想像一下我們使用:after來插入一個點號，并且設置它的屬性{clear: both;}。這就是所有你需要做的事情，但是沒有人會接受容器底部有那么一絲空隙，所以我們還要設置{height: 0;}和{visibility: hidden;} 來保證嚴絲合縫。

轉載于:https://www.cnblogs.com/asqq/archive/2012/09/04/3194925.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的CSS中Float概念相关文章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。