彻底认清CSS的Float（浮动）概念

彻底认清CSS的Float（浮动）概念(1) Float（浮动）概念也许是CSS技巧">CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 

　　如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。 

　　让我们尝试去解决这些问题并澄清一些以前使用浮动的误解。我们参考了成打的相关文章，并选取了最为重要的一些你必须了解的问题。 

What You Should Know About Floats 
---------------------------------------------------------------------------

　　“关于图文围绕的实践可以追溯到很久很久以前。这也就是为什么从Netscape1.1开始这个功能被引入浏览器，以及为什么CSS使用浮动属性来实现它。‘Float(浮动)’这个术语引用自伴随Netscape1.1一同发布的‘Additions to HTML 2.0’文档，描述一个元素浮动至某一侧并停下的表现方式。”

　　“浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。” 

　　“元素浮动后将自动转为块级元素。该元素可以被移动至当前行的左侧或右侧。属性如下：float: left, float: right or float: none”

　　“你应该为所有的浮动元素设定宽度属性（除非是＜img＞元素，因其具有隐含的宽度）。如果不设定宽度，结果将是不可预知的。”

　　“举例来说，浮动元素应该定义宽度属性，不论是显式指定的还是隐含的。另外，它会尽可能的水平的填充容器元素，就像非浮动内容那样，不给其他内容空间以围绕它们。其次，和正常文档流中的元素不同，浮动元素的垂直边距(margin)不会叠加。最后，浮动元素可以和临近在正常文档流中块级元素重叠（译注：浮动元素不占任何正常文档流空间，所以建议不要理解成重叠，而是腾空浮动的概念。）。”

　　“首先我们要牢记的一件事情是，浮动元素只能浮动至左侧或者右侧，没有浮动至中间一说，这是很多新手容易范的错误。记住，最基本的规则，浮动元素只能浮动至两侧。” 

　　“当我们让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。如果我们向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。如果我们浮动更多的元素，他们将一个挨一个排列，但不久就会空间不足，当该行已经无法容纳更多的浮动元素，则下一个浮动元素会换行继续排列。”  

　　Containing blocks or containing boxes：“容器元素是指包含其他子元素的行级或块级元素。。。。” 　

　　“当明确指定时，浮动元素垂直位置由它原先在文档流中的位置决定，顶端与当前行顶端对其。但是水平方向上，它尽可能远的向容器元素边缘移动，但是仍遵循容器元素的填充距离(padding)。同行的行内元素则围绕浮动元素排列。” 

　　“由于浮动元素不占据正常文档流空间，所以浮动元素前后那些未明确指定位置的块级元素会占据浮动元素本来应该处在的位置，就好像它从来不曾存在过。而浮动元素之后的那行会根据浮动元素缩小宽度。浮动元素之前的元素则会重新被排列，占据独立的一行。（译注：ie 和 ff 在这种情况下的表现不尽相同）” 

　　“如果当前行的水平方向上没有足够的空间容纳浮动元素，则向下一行，直至有能容纳该元素的行。”