本文介绍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!
基本的浮动原理
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 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像 span 和 strong 这样的行内置元素也可以很好地进行浮动。
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 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。事实上，floats当前被要求具有一个申明的宽度，但这不是现代浏览器制造者的思路，W3C以及开始同意这样的作法。现在大多数人的意见是没有指定宽度的float应当伸缩包装到浮动内容的宽度。因此，内部带有图片的一个float将和图片一样宽，带有文本的一个浮动将与该浮动内的最长文本行一样宽。
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的浮动规则中这样讲： "假如 width 是以 auto 方式计算得到，使用的值是 shrink-tofit 伸缩到适合的宽度。" 所有现代的浏览器已经这样做，除了IE5/Mac。除非浮动具有某种指定的宽度，否则该浏览器会变得错误百出。现在大多数聪明的编码人员会让浏览器伸缩其没有宽度属性的floats， 并使用一个隐藏的专门给IE5/Mac的宽度知识。这可能不算很巧妙，但是它是现在不能满足该规范的极少数的浏览器，同时Mac用户有几种更好的选择。MS停止了对IE5/Mac的支持，因此寻求像伸缩包装式浮动这样有用特性被避免的代价太高了，这样只有IE5/Mac用户不会看到错误的浮动。
浮动是如何进行的
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. 浮动"从流程中被移除出来", 但是与绝对位置的元素（层次）不同，浮动是在他们前面的最后一个块元素之后直接被显示出来（就像块盒一样）。假如该浮动是在一个“行块”中，该浮动的上边界被放置在行块顶部的水平上。当除此以外，浮动与绝对元素相似，原先的块盒会完全忽略浮动和AP元素。那些静态的块盒知识保持一个接一个地”跟随“，就似乎没有浮动不在那里一样。
The following is minimal code for the example graphic:
