本文介紹CSS Float的基本原理和行為特征，并介紹各種瀏器Float特性的Bugs。 if you are like most people, the whole issue of Floats is rather intimidating. The theory is difficult to grasp, and on top of that, the bugs are rumored to be numerous and nasty. Well fear not, because we will walk through the concepts, some of the bugs, and the practical uses of floats, in nice easy stages. Be assured that you will suffer no ill effects. Rather, a vast new world of positioning will open up before you. Onward!
基本的浮動(dòng)原理
Any element may be floated. Paragraphs, div's, lists, tables, and images can all be floated, and in fact even inline elements like "span" and "strong" can float just fine. 任何元素 element 都可以被浮動(dòng)。段落、div、list、tables,以及圖像都可以被浮動(dòng)，事實(shí)上即使是像 span 和 strong 這樣的行內(nèi)置元素也可以很好地進(jìn)行浮動(dòng)。
Any element that is declared to be a "float" is automatically made a "block level element," meaning it can have both a declared "width" and "height." In fact, floats are currently required to have a declared width, but this is not what modern browser makers think, and the W3C has come to agree. The consensus now is that a float with no assigned "width" should "shrink-wrap" to the width of the float content. So a float with an image inside will be as wide as the image, and a float with text will be as wide as the longest text line in the float. 任何申明為 float 的元素自動(dòng)被設(shè)置為一個(gè)"塊級(jí)元素", 這表示它可以具有申明的"width"和"height"屬性。事實(shí)上，floats當(dāng)前被要求具有一個(gè)申明的寬度，但這不是現(xiàn)代瀏覽器制造者的思路，W3C以及開(kāi)始同意這樣的作法?，F(xiàn)在大多數(shù)人的意見(jiàn)是沒(méi)有指定寬度的float應(yīng)當(dāng)伸縮包裝到浮動(dòng)內(nèi)容的寬度。因此，內(nèi)部帶有圖片的一個(gè)float將和圖片一樣寬，帶有文本的一個(gè)浮動(dòng)將與該浮動(dòng)內(nèi)的最長(zhǎng)文本行一樣寬。
The CSS2.1 rules for floats now say: "If 'width' is computed as 'auto', the used value is the 'shrink-to-fit' width". All modern browsers already do this, except for IE5/Mac. That browser will be buggy unless the float has some kind of specified width. These days most savvy coders will let browsers shrink-wrap their widthless floats and use a hiding hack to "feed" IE5/Mac a width for the float. It might not be as pretty, but that is a very minority browser now and Mac users have several quality alternatives too. Microsoft has ceased to support IE5/Mac, so perhaps it's too much to ask that a highly useful feature like float shrink-wrapping be avoided, just so that IE5/Mac users won't see misshapen floats. CSS2.1的浮動(dòng)規(guī)則中這樣講： "假如 width 是以 auto 方式計(jì)算得到，使用的值是 shrink-tofit 伸縮到適合的寬度。" 所有現(xiàn)代的瀏覽器已經(jīng)這樣做，除了IE5/Mac。除非浮動(dòng)具有某種指定的寬度，否則該瀏覽器會(huì)變得錯(cuò)誤百出?，F(xiàn)在大多數(shù)聰明的編碼人員會(huì)讓瀏覽器伸縮其沒(méi)有寬度屬性的floats， 并使用一個(gè)隱藏的專門給IE5/Mac的寬度知識(shí)。這可能不算很巧妙，但是它是現(xiàn)在不能滿足該規(guī)范的極少數(shù)的瀏覽器，同時(shí)Mac用戶有幾種更好的選擇。MS停止了對(duì)IE5/Mac的支持，因此尋求像伸縮包裝式浮動(dòng)這樣有用特性被避免的代價(jià)太高了，這樣只有IE5/Mac用戶不會(huì)看到錯(cuò)誤的浮動(dòng)。
浮動(dòng)是如何進(jìn)行的
Floats are "removed from the flow," but unlike absolutely positioned elements (layers), floats do get displayed directly after the last block element that precedes them (just like block boxes do). If the float is inside a "line box," the float's upper edge is placed level with the top of the line box. But other than that, floats are similar to absolute elements, in that ordinary block boxes totally ignore both floats and AP elements. Those static block boxes just keep "flowing" one after another as though the float were not there. 浮動(dòng)"從流程中被移除出來(lái)", 但是與絕對(duì)位置的元素（層次）不同，浮動(dòng)是在他們前面的最后一個(gè)塊元素之后直接被顯示出來(lái)（就像塊盒一樣）。假如該浮動(dòng)是在一個(gè)“行塊”中，該浮動(dòng)的上邊界被放置在行塊頂部的水平上。當(dāng)除此以外，浮動(dòng)與絕對(duì)元素相似，原先的塊盒會(huì)完全忽略浮動(dòng)和AP元素。那些靜態(tài)的塊盒知識(shí)保持一個(gè)接一個(gè)地”跟隨“，就似乎沒(méi)有浮動(dòng)不在那里一樣。
The following is minimal code for the example graphic:
