理解CSS Floats

原作者：Steven Bradley

发表时间：2009年10月15日

原文链接：http://www.vanseodesign.com/css/understanding-css-floats/

翻译：子毅 --------- 将JavaScript进行到底

有效地使用CSS浮动非常容易使人迷惑，并且这可能也是绊倒许多新手的事情之一。然而，一旦你学会了控制浮动元素，它将为你的设计开辟一个全新的世界，使得开发布局更简单。

只要你理解了几个关键点，浮动真的没有想象的那样难。

什么是浮动

浮动是一个盒子移位到当前行的左边或右边。一个浮动(a float)（或者‘被浮动'或者‘正在浮动’的盒子）最有趣的特点是，内容可能会流动到其边沿（或者在有'clear'属性时，被禁止这样做）--- w3.org

浮动属性有三个值：none ，这是个默认值，left 和right。正如你可能希望的，它没有center值。在css中，水平居中通过margins来实现。

在直接包含div中，浮动元素会尽可能地向左或向右移动。取决于被声明浮动元素所在的可用宽度，其他元素可能坐落在被浮动元素的下一行，或者流动到其周围

Floats和Positioning的区别

在css中，这里有三种类型的定位方案。来自w3.org

1.正常流 - 在CSS 2.1中，正常流包括块级格式化块盒，行内格式化行内盒，相对定位的块盒或行内盒，还包括在盒子内定位的盒子。

2.浮动 - 在浮动模型中，一个盒子首先按照正常流放置，然后从正常流中取出，并尽可能地向右或向左移位。内容可能会流动到一个浮动元素的边沿。

3.绝对定位 - 在绝对定位模型中，一个盒子完全从正常流中清除（它对后面的兄弟元素没有了影响），并分配一个相对于包含块的位置。

相对定位移动元素到相对于它在整流文档流中的位置。其他元素并不会受影响，它们放置在没有定位时的位置。这导致页面上相对定位的元素可能会覆盖围绕在其周围的元素。

注意，浮动元素虽然已经从正常流中取出，但是它们还会影响围绕在其周围的元素。

怎样有效地使用Floats

这里有两种主要的使用方式

文本流动到一张图片周围

图片是最常见的，但是你可以替换一个不同的元素。这个主意是文本将会包围一些元素

这是最原始的浮动元素的意图。你可以向左或向右浮动一个元素，并允许其他元素，通常是文本流动或围绕到其周围。当以这种方式使用浮动，你需要把浮动元素和图片放在一个包含元素中。

<p>
<img class="alignleft" src="" alt="" width="" height="" />
Lots of text here. Enough to wrap around the image.
</p>

img.alignleft {float: left; margin: 0 10px 10px 0}

在上面的代码中，浮动元素和围绕文本均被包含在一个段落中。

注意在css中我添加了右和底边距。这是一个很好的实践，当浮动一张图片，然后在图片和围绕文本之间添加一些空白。向左浮动的图片添加一些右外边距，向右浮动的元素添加一些左外边距。两者还都添加了一些底外边距。10px是任意的，你也可以选择使用添加内边距。

多栏布局

因为浮动允许两个块级元素（比如div）并列起来（sit up against each other译者拿捏不准），因为很容易用他们来创建多栏。

<div id="wrapper"><div id="left-column"></div><div id="right-column"></div>
</div>

#left-column {float: left}
#right-column {float: left}

将上面的两个div元素均向左浮动，你就可以得到两栏。当然，你还需要保障两个div的宽度可以适应包含div的宽度。另一种选择是，你可以将右边的栏向右浮动，但是我通常倾向于向相同的方向浮动。

在两栏上面添加一个头部div，在下面添加一个底部（需要应用一个clear属性），你就可以得到一个很好并且简单的两栏布局

关于浮动元素的最后一点，始终为浮动元素设置一个宽度。没有设置可能会得到意想不到的结果

清除浮动

通常，你想保证一个元素在一个或多个浮动元素下面。解决方案是使用css clear属性。

clear属性有这些值： left， right， both， none（默认值）和inherit。在实践中，你将会只会使用前三个值，并且多数时候你会使用clear：both

或许，最常用的是清除footer div，使得它坐落在两栏或三栏浮动元素下面

包含浮动（Containing Floats)

首先要考虑的事是当包含浮动时，要保证包含元素足够宽使得浮动元素可以并排在一起。假如你向左浮动了两个元素来创建两栏布局，而两个浮动元素的宽度之和超过了包含元素，其中一个浮动元素将会掉到下一行去。

上面我提到，浮动元素将会从正常文档流中清除。这会导致一个有趣而又令人迷惑的问题，当包含元素中的所有元素都被浮动时。

一种常见的问题是，当你有一个header div ，其中有唯一的一个logo图片元素，并且你使它向左浮动。你可能会对header应用一张图片背景，但是它并不会出现。

这个问题是，header div只包含一张被浮动的图片，因为这张图片不再属于正常文档流，所以header div 包含空元素，它的高度变成了0，包含自身基本上已经折叠。这里有几个方法来解决这种问题。

你可以显式得为包含div设置一个高度。在上面的header例子中它将会工作得很好，但是它可能不会在所有折叠（collapased）的包含元素中可行。这时你可以在浮动元素下添加一个空div来清除浮动。

<div class="clear"></div>

这将会工作得很好，假如在浮动元素下允许添加一些额外的空间。一些浏览器可能会为这个空div添加一些默认的height， margin， padding等

最后一个方法是在包含元素上使用overflow属性。通常你会使用overflow:hidden，但是取决于你的情况，你可能会倾向于使用overflow:auto，或者使用overflow-y而不是在两个方向上都使用。Overflow会阻止包含元素折叠。

Floats的问题

除了包含元素折叠，这里还有几个浮动问题需要注意

老版本IE浏览器有双边距的bug。假如你向一个方向浮动一个元素，并在同一个方向上为这个元素添加一个margin（left/left，或者right/right），IE将会使用双倍的margin。

一个简单的解决方法是为浮动元素设置display: inline。同时，你也可以使用额外的注释在为IE设置一个不同的margin或者为一个特别的IE版本

另一个常见的问题是，在一个浮动元素内部添加一个元素，添加的这个元素的跨度大于浮动元素的宽度。举个例子，在一个浮动div元素内部，添加一张图片，而这张图片的宽度大于这个div的宽度

取决于浏览器，这可能会导致你的浮动元素大于你想要的宽度，或者这将导致内容与图片重叠。保证浮动元素内部的元素宽度不大于浮动元素宽度。

最后一个需要注意的问题是，底外边距消失。一个浮动元素在另一个浮动元素内部，内部浮动元素的底外边距将会被忽略。这种情况发生时，简单的解决方案是使用padding来替代margin。

总结

当人们开始学习css时，他们倾向于使用绝对和相对定位来进行布局，表面上两者看起来更简单些。通常用浮动来布局是更好的实践，假如你记得几个你应该理解的几个关键点，并能在你的布局中控制好浮动元素。

浮动首先在正常文档流中放置，然后在包含元素内尽可能地移到左边或右边，并从正常文档流中清除。
只要水平方向上有足够的空间，未浮动元素可以在浮动元素周围围绕。而如果没有足够的空间，它们将会在浮动元素下面放置
浮动和定位元素是不同的，它们的表现方式也不同。你可以应用两者到同一个元素
当你想使文档在浮动元素周围围绕，或者想创建多栏布局，你可以使用浮动
当你想使得一个元素在浮动元素下面，或者阻止包含元素折叠，记得清除浮动
为IE找到合适的方法来解决几个常见的问题

我希望这能够为你在使用css时澄清一些疑惑。假如你还有问题，你可以提问，我将尽我最大的努力来回答。下面还有一些其他关于浮动的好文章，你可能会从中找到有帮助的东西。

CSS浮动理论：你需要知道的东西
关于浮动的一切
Floatorial

译注：放上另一篇关于浮动，清除的好文章，强烈推荐

杨元：CSS浮动(float,clear)通俗讲解