本文介紹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è)隱藏的專(zhuān)門(mén)給IE5/Mac的寬度知識(shí)。這可能不算很巧妙，但是它是現(xiàn)在不能滿(mǎn)足該規(guī)范的極少數(shù)的瀏覽器，同時(shí)Mac用戶(hù)有幾種更好的選擇。MS停止了對(duì)IE5/Mac的支持，因此尋求像伸縮包裝式浮動(dòng)這樣有用特性被避免的代價(jià)太高了，這樣只有IE5/Mac用戶(hù)不會(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:


　　Shows how line boxes are shortened in the presence of a float. You can get inline elements like text and images to go along the side of a float and continue below it, just like using the good old (but deprecated) "align=left" on an image. Floats, however, are much more versatile than that.
　　上例展示了行盒在一個(gè)浮動(dòng)中是如何被削短的。你可以讓行內(nèi)元素（像文本、圖像）在一個(gè)浮動(dòng)的邊上放置并且在它的下面繼續(xù)，就似乎使用很好的老式（不過(guò)已過(guò)時(shí)）圖像的屬性"align=left"。浮動(dòng)，比這要靈活的多。

　　It is a common misconception that block elements following a float are made to run down the side of the float, but that is not correct. Actually, it is only the "line boxes" within those block elements that behave so. (Please see the first screen shot image.)
　　認(rèn)為跟在一個(gè)浮動(dòng)后面的塊元素會(huì)被設(shè)置為放置在浮動(dòng)的下方是通常的一個(gè)誤解。事實(shí)上，只有在哪些塊元素內(nèi)部的”行盒“才會(huì)這樣。

　　Remember that I mentioned that floats are removed from the document flow? The specs require that line boxes that would pass behind a float be shortened enough to keep the line box out in the open. That means text and inline images cannot ever be covered by a float, unless one or both are in separately positioned containers. That is, if a float were nested in an absolutely positioned element, and that AP element were made to overlap a paragraph, the line boxes in the paragraph would not be shortened by the float, due to their different contexts. Rather, that text would indeed be covered by the float.
　　還記得我提到的浮動(dòng)被從文檔處理流程中移除出來(lái)的話嗎？標(biāo)準(zhǔn)要求在一個(gè)浮動(dòng)后面的行盒被進(jìn)行足夠的削短以保持行盒在外部開(kāi)放區(qū)。這表示文本和行內(nèi)的圖像永遠(yuǎn)不會(huì)被浮動(dòng)覆蓋，除非他們其中之一或兩個(gè)在獨(dú)立的、指定位置的容器中。這就是說(shuō)，假如一個(gè)浮動(dòng)被嵌套在一個(gè)絕對(duì)位置的元素中，并且AP元素被設(shè)置為覆蓋一個(gè)段落，在段落中的行盒不會(huì)被浮動(dòng)削短，這是因?yàn)樗麄儾煌�的上下文環(huán)境造成的。而且，文本的確會(huì)被該浮動(dòng)覆蓋。

　　A common problem people have with floats is keeping text outside the float from touching the sides of the float. Putting left padding or margin on the paragraph following the float won't work, because those properties are applied over on the left side of the paragraph, behind the float! The proper way is to place margins on the float itself, thus convincing the line boxes that the float is "bigger" than it appears, and shortening them accordingly. Most floats typically get such margins just on the side nearest the text and the bottom. The float in the screenshot above has a small right margin.
　　對(duì)于浮動(dòng)的一個(gè)常見(jiàn)錯(cuò)誤是：將文本保留在該浮動(dòng)的邊界之外。對(duì)浮動(dòng)后面跟著的段落放置padding或設(shè)置邊界是不會(huì)生效的，因?yàn)檫@些屬性被應(yīng)用在跟隨在浮動(dòng)后面的段落的左邊。正確的方式是對(duì)浮動(dòng)本身設(shè)置margins，這樣可以讓行盒正確顯示，浮動(dòng)要比它呈現(xiàn)的要更大，并且對(duì)他們進(jìn)行相應(yīng)的削短。大多數(shù)浮動(dòng)通常只是從按照最靠近文本的邊和底部獲得這樣的邊界信息。上面浮動(dòng)的截圖有一個(gè)小的右邊界。

　　Meanwhile, the block boxes following the float just get covered by the float (even though their content may have been moved aside). If the float is made very tall, it can drape over a large stack of block boxes, as shown in the second screen shot image.
　　同時(shí)跟在float后面的塊盒只是被該浮動(dòng)覆蓋（即使他們的內(nèi)容已經(jīng)被移動(dòng)到邊上）。假如該浮動(dòng)被設(shè)置的非常高，它可以擋住大量堆疊的塊盒上，就像第二個(gè)截圖看到的那樣:


　　Shows how floats can cover multiple block boxes.
　　展示了浮動(dòng)是如何覆蓋多個(gè)塊盒的。

　　As seen above, another behavior of floats is their "direction". When a float is defined, it is always given a directional value of either "left" or "right," for example: div {float: left;} . These values simply move the float to the indicated side of the containing box.
　　如上所示，浮動(dòng)的另一個(gè)行為是他們的”方向”。當(dāng)一個(gè)浮動(dòng)被定義的時(shí)候，總是被給予一個(gè)方向值。（“l(fā)eft”或“right”），例如：div{ float:left;}. 這些值簡(jiǎn)單地將浮動(dòng)移到到容器盒的指定邊界。

　　Occasionally, float newbies will try to use float values such as {float: up;} or {float: bottom;} , but these values are not valid, and there are no plans to include them in the float specification. One can always hope...
　　偶然，float的新手會(huì)試圖使用浮動(dòng)值，例如{float:up;} or {float:botton;}, 但是這些值是無(wú)效的，在浮動(dòng)的標(biāo)準(zhǔn)中并沒(méi)有計(jì)劃要添加這些值。人們總是可以期待...

浮動(dòng)從何處開(kāi)始

　　If a float comes between two block boxes, it has its upper edge placed against the lower edge of the preceding block box, and then it is moved over to the left (or right), until it strikes the side of the outer container element, often the <body> element.
　　假如一個(gè)浮動(dòng)在兩個(gè)塊盒之間，它會(huì)將其上邊界放置在前置塊盒的下邊界上，并且將其移動(dòng)到左（或右邊），直到達(dá)到外界容器元素的邊界，通常是<body>元素。

　　If the float is nested inside the second block box, and that container box has no borders or padding, it appears just the same as when the float is between the block boxes. However, if those block boxes are held apart by margins, the float's top edge starts at the point where the margin of one box meets the other box. In the following screen shot image, the block boxes have top margins, but the left float's left margin has been removed to show its default (non-margined) behavior.
　　假如浮動(dòng)被嵌套在第二個(gè)塊盒中，并且該容器盒沒(méi)有邊框盒填充，浮動(dòng)呈現(xiàn)樣式，與浮動(dòng)被放置在塊盒之間是一樣的。但是，假如這些塊盒通過(guò)邊距分離，該浮動(dòng)的頂部邊界從一個(gè)盒與另一個(gè)盒邊界的交叉點(diǎn)上開(kāi)始。在以下截圖中，塊盒右頂部邊界，但是左側(cè)的浮動(dòng)的左邊距已經(jīng)被移動(dòng)以顯示缺省的動(dòng)作。:



　　Shows the different places that floats may be placed.
　　展示了浮動(dòng)可能被放置在不同的位置。

水平浮動(dòng)堆疊

　　If a left float is placed in the upper left corner of its container, and a similar float directly follows it, that float is placed at the upper right of the container, and then moved to the left, stopping against the right side of the first float.
　　假如居左的浮動(dòng)被放置在其容器的左上腳，并且其后跟隨一個(gè)同向的浮動(dòng)，該浮動(dòng)會(huì)被放置在容器右上腳，然后移動(dòng)到左側(cè)，邊界延伸到第一個(gè)浮動(dòng)的右側(cè)時(shí)停止。

　　That last behavior lets us create a whole row of floats, each being placed to the right of the one before (or to the left of the one before if {float: right;} is used). Also, when there is not enough room for all the floats to fit in one row, the extra floats "wrap" down to another line, almost like inline elements do. This is very handy for making an array of clickable image "thumbnails," because the array will adjust to whatever screen size happens to be used, simply rewrapping as necessary.
　　最后的一種行為讓我們創(chuàng)建整行的floats，每個(gè)都被放置在前一個(gè)的右側(cè)（或者左側(cè)，假如使用{float:right;}). 同樣，當(dāng)一行中沒(méi)有足夠的空間時(shí)，多出來(lái)的floats繞到下一行，非常像行內(nèi)元素那樣。這對(duì)于制作可點(diǎn)擊的圖像“簡(jiǎn)略圖”非常方便，因?yàn)榫仃嚂?huì)自動(dòng)調(diào)整到屏幕的尺寸，只是簡(jiǎn)單地在需要時(shí)進(jìn)行回繞。

　　Below is a line of colored left floats. The upper left float comes first in the source, and the lower right is last. They all have small margins just to look pretty. Try narrowing the window of your browser, and watch as the float line gets "wrapped" down to accommodate the window size.
　　以下是一行彩色的左向浮動(dòng)。左上方的浮動(dòng)在源代碼中先出現(xiàn)，右下方的最后。他們都有一個(gè)小的邊距以便看起來(lái)更好一些。試一下將瀏覽器的尺寸變小一些，觀察浮動(dòng)行被回繞以使用窗口尺寸。

　　Float 1 Float 2 Float 3 Float 4 Float 5 Float 6 Float 7 Float 8 Float 9 Float 10 Float 11 Float 12 Float 13 Float 14 Float 15
　　The floats above will wrap to fit any screen size. Notice how the text in this following (invisible) paragraph also adjusts to any changes in the float arrangement. The paragraph actually starts right where the first float does, but since only the text in the paragraph is visible, that fact is not obvious. The paragraphs in the screen shots have borders and backgrounds in order to show the actual situation.
　　上述浮動(dòng)會(huì)回繞以使用任何屏幕的尺寸。注重其下段落（不可見(jiàn)）的文本同樣也調(diào)整以使用浮動(dòng)排列的變化。該段落實(shí)際上從第一個(gè)浮動(dòng)開(kāi)始的地方開(kāi)始，但是只有在段落文本可見(jiàn)的情況下，該事實(shí)才不明顯。截圖中的段落具有邊框盒背景以便顯示實(shí)際的位置。

　　If the float is given a "right" value instead of "left," the behaviors are exactly the same, but the float moves right rather than left, and subsequent floats are added to the left end of the row, not the right. In either case, wrapping is similar, unless float bugs cause differences.
　　假如浮動(dòng)被設(shè)置為“右側(cè)”而不是“左側(cè)”，其行為完全相同，知識(shí)浮動(dòng)從右開(kāi)始，而不是從左開(kāi)始，后續(xù)的浮動(dòng)被添加到左側(cè)行尾而不是右側(cè)。兩種情況，回繞都是一樣的，除非float的Bugs導(dǎo)致差異。

　　Think of it this way. A float in a container is first moved up to the topmost space it can fit into (on the side away from its "direction"), then is moved in the designated float direction until it bumps into the side of the container, or another float. Each succeeding float does the same thing, until one of the floats can't find a space wide enough on the level of the others. Instead it is forced to stop against the bottom of the other floats, and then slide to the side just like before.
　　用這樣的方式思考，一個(gè)容器中的浮動(dòng)首先被移到它能夠到達(dá)的最上方的空間（在其定位的方向），然后按設(shè)置的浮動(dòng)反向移動(dòng)直到到達(dá)容器的邊界，或者碰到另一個(gè)浮動(dòng)。每個(gè)連續(xù)的浮動(dòng)都是同樣處理，直到其中一個(gè)浮動(dòng)在另一個(gè)浮動(dòng)的level中無(wú)法發(fā)現(xiàn)足夠?qū)挼目臻g。這樣，它會(huì)被強(qiáng)制停止到另一個(gè)浮動(dòng)的底部，然后向之前那樣進(jìn)行滑行。

　　Float 1 Float 2 Float 3 Float 4 Float 5 Float 6 Float 7 Float 8 Float 9 Float 10 Float 11 Float 12 Float 13 Float 14 Float 15 Float 16 Float 17 Float 18 Float 19 Float 20
　　Caution! Watch out for floats that are not all the same height. When a float being placed in the second row comes up against the first row (over to the right), and it tries to slide sideways (to the left), it gets "stuck" on the first taller float it encounters. With a large number of irregular floats this can get really ugly. The above batch of floats contains a couple of "joker" floats that are slightly taller than the others.
　　警告！注重上面的浮動(dòng)的高度不是一樣的。當(dāng)一個(gè)浮動(dòng)被放置到第二行緊接第一行時(shí)，它視圖滑行到邊界，當(dāng)碰到第一高的浮動(dòng)時(shí)會(huì)被停住。當(dāng)有大量不規(guī)則浮動(dòng)時(shí)，這會(huì)造成很丑陋的情況。上面的浮動(dòng)中包含一些比其他高一些的浮動(dòng)。

　　Test this behavior by narrowing your browser to different screen widths (browser abuse).
　　縮小你的瀏覽器以不同的屏幕寬度來(lái)測(cè)試。

　　Whenever this technique is used to make a large thumbnail array, care must be taken to insure all the floats are the same height, or the page might easily resemble a train wreck.
　　在追著一個(gè)大型的簡(jiǎn)略圖矩陣時(shí)，必須注重確保所有的浮動(dòng)具有同樣的高度，或者頁(yè)面可以輕易地被出軌的浮動(dòng)重新組裝。

　　All the live demos in this article have been hacked to account for the faulty IE5.x/win box model. This was necessary due to the borders and padding applied to the boxes in those demos.
　　本文中的所有例子都使用了非凡的處理以適應(yīng)IE5.x/win盒模式的缺點(diǎn)。由于邊框和填充造成了必須非凡處理。

反向浮動(dòng)


　　Here we come to the trickiest and most misunderstood part of floating.
　　以下開(kāi)始講述關(guān)于浮動(dòng)的最晦澀、最難以理解的部分。

　　Think back to what was said about static boxes following floats. Those boxes just ignore the float, and display up against the previous static boxes. But let's say you give that following box the clear property, {clear: both;} . What this does is extend the margin on the top of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.
　　回顧一下跟隨浮動(dòng)后面的靜態(tài)盒。這些盒只是忽略浮動(dòng)，并且在前一個(gè)靜態(tài)盒的后面排列顯示。假設(shè)你給以下盒一個(gè)清除屬性，{clear:both;}。這是將被清除盒的頂部邊距擴(kuò)展，將其向下推直到清理浮動(dòng)的底部。換句話說(shuō)，該被清理的盒的頂部邊距（無(wú)論它之前被設(shè)置成什么值），都會(huì)被瀏覽器增加到需要保證被清理盒位于浮動(dòng)下回的長(zhǎng)度。

　　So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level. The image shows how this might look.
　　這樣的效果是，一個(gè)被清理的盒無(wú)法與前置浮動(dòng)保持在同一個(gè)水平位置上。它必須出現(xiàn)在其下方。以下圖例展示了效果。

　　Shows how a box may clear below a float.
　　展示一個(gè)盒如何清理下方的一個(gè)浮動(dòng)。

　　Remember, floats are not actually contained within a block box, even though they may be nested there in the source code. Sure, the float's screen starting point is determined by its nested location, but after that it just drapes over the containing box, as do absolute elements. Only line boxes containing inline elements (like text) will care where the float is displayed.
　　記住，浮動(dòng)實(shí)際上并不是真正地被包含在一個(gè)塊盒中，即使在源代碼中是怎樣嵌套的。請(qǐng)注重確認(rèn)，浮動(dòng)的屏幕開(kāi)始點(diǎn)是由它所嵌套的位置決定的，之后它只是在容器盒上展開(kāi)，就像絕對(duì)元素一項(xiàng)。只有包含行內(nèi)元素的行盒（例如文本），才需要關(guān)注浮動(dòng)在哪里被顯示。

　　The standard method of making an outer container appear to "enclose" a nested float is to place a complete "cleared" element last in the container.
　　制作一個(gè)看起來(lái)封裝一個(gè)嵌套浮動(dòng)的外容器的標(biāo)準(zhǔn)方法是在容器的最后放置一個(gè)完整“被清理”的元素:


　　Since that div is not floated, the container must recognize it and enclose it, and because of that top margin (added by the browser because of the "clear" property), the div "pulls" the bottom edge of the container down below the bottom edge of the float.
　　由于div沒(méi)有被浮動(dòng)，容器必須識(shí)別它并封裝它，并且由于頂部邊距（由于“clear”屬性由瀏覽器添加），該div將容器的底部邊界拉到浮動(dòng)框的底部。

　　Sure, that is a weird way to do it, but that's what the specs say. However, there is talk at the W3C about adding a rule that would make a container "auto- enclose" a float. It sure would be simpler.
　　的確，這是一個(gè)古怪的方法，但是標(biāo)準(zhǔn)就是這樣說(shuō)的。不過(guò)，W3C中有一個(gè)討論關(guān)于添加一個(gè)容器自動(dòng)封裝一個(gè)浮動(dòng)的規(guī)則。這樣就于更加簡(jiǎn)單。

　　In fact, both Explorer and Opera 7 already do "auto-enclose" nested floats, in violation of the specs. Opera 6 did not do this, so it seems Opera is following Microsoft's non-standard lead.
　　事實(shí)上，IE盒Opera7已經(jīng)自動(dòng)封裝嵌套的浮動(dòng)，與標(biāo)準(zhǔn)不一樣。Opera6不是這樣，因此看來(lái)Opera在跟隨MS的非標(biāo)準(zhǔn)道路。

　　It is also possible to use {clear: left;} or {clear: right;} . This allows an element to clear a left float but not a right, or the opposite. You will have to get pretty fancy to need this kind of control, however.
　　還可以使用 {clear:left;} 或 {clear:right;}. 這可以讓一個(gè)元素清除左側(cè)浮動(dòng)當(dāng)不影響右側(cè)浮動(dòng)，或者相反。要使用這種控制你需要有相當(dāng)?shù)南胂窳Α?br/>
　　In general, clearing works well, but can sometimes induce minor and not so minor bugs, which are almost entirely confined to Internet Explorer.
　　通常來(lái)說(shuō)，清除可以很好地完成，但是有時(shí)會(huì)引起不大不小的錯(cuò)誤，這完全是由IE造成的。