CSS Float 基本概念汇总
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers.
Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。
Still, if you take a closer look at the float theory, you’ll find out out that it isn’t that complex as it appears to be. Most related problems are caused by the older versions of (take a guess) Internet Explorer. If you know the bugs, you can control the way information is presented in a more sophisticated, profound way.
如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想^_^）。如果你知道这些bug，你就能避免这些问题。
Let’s try to tackle the issue and clarify some usual misunderstandings, which always appear once floats are being used. We’ve browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.
让我们尝试去解决这些问题并澄清一些以前使用浮动的误解。我们参考了成打的相关文章，并选取了最为重要的一些你必须了解的问题。 Update (01.05.2007): our comment form returns some strange mistakes. We’re working on it. Sorry for inconvenience.
What You Should Know About Floats
你需要了解的关于浮动的一些概念
“The practice of flowing text around an image goes back a long, long time. That’s why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float. The term “float” refers to the way in which an element floats to one side and down, as described in the original “Additions to HTML 2.0″ document that accompanied the release of Netscape 1.1.”“关于图文围绕的实践可以追溯到很久很久以前。这也就是为什么从Netscape1.1开始这个功能被引入浏览器，以及为什么CSS使用浮动属性来实现它。‘Float(浮动)’这个术语引用自伴随Netscape1.1一同发布的‘Additions to HTML 2.0’文档，描述一个元素浮动至某一侧并停下的表现方式。”[Containing Floats]
“A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. […] When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.”
“浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。” [Float Positioning]
“When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are float: left, float: right or float: none.”
“元素浮动后将自动转为块级元素。该元素可以被移动至当前行的左侧或右侧。属性如下：float: left, float: right or float: none”[Floatutorial: Float Basics]
“You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.”
“你应该为所有的浮动元素设定宽度属性（除非是<img>元素，因其具有隐含的宽度）。如果不设定宽度，结果将是不可预知的。”[Floatutorial: Float Basics]
“For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it. Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow.”
“举例来说，浮动元素应该定义宽度属性，不论是显式指定的还是隐含的。另外，它会尽可能的水平的填充容器元素，就像非浮动内容那样，不给其他内容空间以围绕它们。其次，和正常文档流中的元素不同，浮动元素的垂直边距(margin)不会叠加。最后，浮动元素可以和临近在正常文档流中块级元素重叠（译注：浮动元素不占任何正常文档流空间，所以建议不要理解成重叠，而是腾空浮动的概念。）。”[CSS Positioning: Floats]
“The first thing we need to remember is that a floating element is shifted either to the left or to the right. It is not possible to make an element float in the centre, something that often is frustrating for beginners. The basic rule is that a floating element is only shifted sideways.”
“首先我们要牢记的一件事情是，浮动元素只能浮动至左侧或者右侧，没有浮动至中间一说，这是很多新手容易范的错误。记住，最基本的规则，浮动元素只能浮动至两侧。” [Float Layouts]
“When we float an element it is shifted to the right or to the left until it reaches the edge of the containing block. If we then float another element nearby in the same direction, it will be shifted until its edge reaches the edge of the first floating element. […] If we float more elements in the same direction they will stack up, but sooner or later we’ll run out of space […] when there is insufficient space on the line, they are shifted downward until they fit.”
“当我们让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。如果我们向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。如果我们浮动更多的元素，他们将一个挨一个排列，但不久就会空间不足，当该行已经无法容纳更多的浮动元素，则下一个浮动元素会换行继续排列。” [Float Layouts]
Containing blocks or containing boxes: “A containing block is a box or block that contains other elements (descendant boxes). An element’s containing block means “the containing block in which the element lives”.
Containing blocks or containing boxes：“容器元素是指包含其他子元素的行级或块级元素。。。。”[Floatutorial]
“When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block’s padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.”
“当明确指定时，浮动元素垂直位置由它原先在文档流中的位置决定，顶端与当前行顶端对其。但是水平方向上，它尽可能远的向容器元素边缘移动，但是仍遵循容器元素的填充距离(padding)。同行的行内元素则围绕浮动元素排列。”[CSS Positioning: Floats]
“Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.”
“由于浮动元素不占据正常文档流空间，所以浮动元素前后那些未明确指定位置的块级元素会占据浮动元素本来应该处在的位置，就好像它从来不曾存在过。而浮动元素之后的那行会根据浮动元素缩小宽度。浮动元素之前的元素则会重新被排列，占据独立的一行。（译注：ie 和 ff 在这种情况下的表现不尽相同）”[W3C Visual Formatting Model]
“If there isn’t enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.”
“如果当前行的水平方向上没有足够的空间容纳浮动元素，则向下一行，直至有能容纳该元素的行。” [Floatutorial: Float Basics]
“A floating box can never end up above the upper edge of the line where it’s created. […] The upper edge of a floating box is aligned with the upper edge of the current line box (or with the bottom edge of the previous block box, if there is no line box).”
“任何浮动元素都不可能超过原来所处文档留位置的上边界。浮动元素的顶端必定和当前行顶端对齐（或者在没有当前行元素时和前一个块级元素底部边缘对齐）。”[Float Layouts]
“In order to really understand float theory you have to understand what a line box means in CSS. Unfortunately, that in turn requires you to understand what is meant by an inline box. […] An inline box is generated by those elements that aren’t block-level, such as EM. […] A line box is an imaginary rectangle that contains all the inline boxes that make up a line in the containing block-level element. It is (at least) as tall as its tallest line box.”
“想要真正理解浮动理论，你必须明白在CSS中什么是行(line box)。不幸的是，为了解释什么是行，你必须先明白什么是行级元素。行级元素指的是那些非块级元素，例如 <em>。而行是一个逻辑上的概念，是一个虚拟的矩形，包含了组成该行的所有行级元素，其高度至少等于这些行级元素中最高的那个。” [Float Layouts]
“If we enclose each column in a DIV element with float: left they will appear side by side, just as we expect columns to do. If we then want a full-width footer to be shown at the bottom, no matter which column happens to be longest, we only need to set clear: both on it.”
“如果我们将Div中所有的列都加上 float: left 它们会挨个向左排列，如果我们希望在页面底部有一个页脚，并不需要一个最长的列，只要加上 clear: both 就可以了”[Float Layouts]
“The potential drawback to using floats to contain floats is that you rely on browsers to consistently interpret the layout of multiple nested floated elements. The situation becomes more fragile if these floats are part of a more complicated layout, one possibly using floats, positioning, or tables.”
“使用浮动元素包含浮动元素这样的布局方式有一个潜在的缺点，即你的页面是否能够一直保持一致的展现效果将取决于浏览器的实现是否保持一致。特别是当浮动元素是一个更为复杂的布局中的一部分的话，将变得更加不堪一击。”[Containing Floats]
Clearing the floats
“Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the “clear” property to these following elements. The four options are
clear: left, clear: right, clear: both or clear: none.”“浮动元素之后的元素会自动围绕该浮动元素。如果你不希望这样，你可以为这些元素应用‘clear’属性。该属性有4种设值：clear: left, clear: right, clear: both or clear: none”[Floats and “clear”]How to clear CSS floats without extra markup – different techniques explained. There are three major approaches: a) Floating the containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS pseudo-class. A test-page for techniques.
有很多技巧可以做到清理浮动元素，但不引入额外的无语义标签。下面3种是比较常见的做法： a) 将容器元素一起浮动 b) 在容器元素上使用 overflow: hidden c) 使用:after这样的css伪类。 [How to clear CSS floats without extra markup]
“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, which has the effect of ‘dragging’ the lower edge of the containing box lower than the float.”
<div> <!-- float container --><div style="float:left; width:30%;"><p>Some content</p></div><p>Text not inside the float</p><div style="clear:both;"></div></div>
“插入一个清理元素是使容器正确包裹所有浮动元素的标准做法，这样做具有将容器底部边缘‘拖拉’以包裹所含元素的效果。” [How To Clear Floats Without Structural Markup]
“A common problem with float-based layouts is that the floats’ container doesn’t want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you’ll have to command the browsers somehow to stretch up the container all the way. You can clear the floats using overflow method.”
“对于基于浮动设计的布局来说，一个常见的问题就是浮动元素的容器不会自动伸展来包含浮动元素。如果你希望在所有的浮动元素的外面加上边框（例如，在容器元素上加上边框），这样你必须显示的命令浏览器来伸展容器。你可以是用overflow method方法。”
Using :after: imagine that we use :after to insert a simple character like a ‘period’, and then give that generated element {clear: both;}. That’s all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.
使用:after 想像一下我们使用:after来插入一个点号，并且设置它的属性{clear: both;}。这就是所有你需要做的事情，但是没有人会接受容器底部有那么一丝空隙，所以我们还要设置{height: 0;} 和 {visibility: hidden;} 来保证严丝合缝。
-
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
[How To Clear Floats Without Structural Markup]
