CSS Float Theory: Things You Should Know(译文)

译者注：原文链接：http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

初次翻译外国文献，若有不足请大家批评指正！

“[]”内均为每段内容的原文名和原文地址


浮动元素的概念也许是CSS中最不直观的概念之一了。浮动属性的功能经常被误解。比方说，在一个文章内容里，人们会错误地以为整篇文章都在围绕着它（带有浮动属性功能的元素），因此造成了一些可读性和使用性的问题。不管怎样，造成这些后果的原因都不是因为浮动属性本身的定义造成的，但是若我们要真正了解它，必须从开发者以及浏览器的角度来解释。

而且，如果你仔细观察浮动的定义，你会发现它的出现并没有你想象的那样复杂。很多相关的问题都是由于老版本的IE造成的。（仅仅是猜测啦）如果你了解到其中的漏洞原理，你就可以用一种更熟练和深刻的方式来让这些信息呈现出来。

我们可以来尝试研究一些问题来阐明一些通常所被人们误解的事情，也就是所谓float元素每次被调用的时候所带来的影响。我们已经通过阅读大量的相关文献并且选择了一些值得关注的地方，也就是你在编写一些关于float元素的CSS基础布局所应该记住的地方。

你需要了解的float

“文本环绕图片的样式要追溯到很久很久以前了。这也是为什么从一开始的Netscape 1.1版本就已经启用对float元素的支持，也是CSS样式尽可能使用float性质的原因。“float”这个术语指的是一个元素浮动到一个容器的一边，正如和Netscape 1.1 同一时间发表的原始文档“Addition to HTML 2.0”描述的那样。“




[containing floats]

“具有float属性的盒子会被定位在一个常规流里，然后随着流体的除去尽可能远地向左或者向右移动。文本内容会随着float元素的边缘进行飘浮。当一个盒子被常规流移除的时候，所有依旧在常规流里的内容都会完全忽略盒子的存在，当然，也不会再为盒子提供空间。“

[float positioning]

“当你使一个元素具有浮动属性的时候，它即成为了一个块框盒子。你可以在当前行内向左或者向右移动这个盒子。属性标记选项可以写成：float:left,float:right或者float:none。“[Floatutorial: Float Basics]

“每当有一个带有float属性的元素，你就应该想到给它设置一个宽度（除非你应用于一个设置了绝对宽度的图像）。如果没有宽度设置，那结果一定是无法想象的“[Floatutorial: Float Basics]

“首先，我们应该将一个浮动的盒子进行一个宽度的定义，不论它定义得明确与否。不然的话，在水平方向它就会填补它所包含的块结构，就像没有float元素的文本内容一样，它不会对其他文本内容留有空间来进行浮动。第二，不同于在常规流里的盒子，浮动属性的盒子的垂直边距不会随着它上下的盒子边距的改变而坍塌。第三，在一个常规流里，浮动的盒子能够覆盖或重叠与它相邻的块级盒子。”




[CSS Positioning: Floats]

“我们要记住的最重要的事情就是含有float属性的元素将会移动到整个文本内容的最左边或者是最右边。绝对不会有一个含有float属性的元素浮动在整块内容的正中间，这些事情对于初学者来说是一个非常大的坎。要记住，最最基本的原则就是浮动的元素永远只有在一块内容的两侧。” [Float Layouts]

“当我们设置了一个浮动元素的同时，它就会自觉地向左或向右移动，直到它贴在了它所在的块级元素的边缘。然后我们要再往同一方向在第一个浮动元素的附近继续浮动另一个元素，这个元素将会移动到第一个浮动元素的边缘。如果我们要让更多的元素往同一个方向进行浮动，那它们就会一个个堆叠起来，但是不过一会你就会发现这个块级元素的空间就会被我们用光。当此行不再有足够的空间时，接下来的浮动元素就会被安排到下一行进行排列直到它们能适应这个空间。” [Float Layouts]

“包含块或包含框：一个包含块是包含其他元素（或者说子盒子）的盒子或块级元素。一个元素的包含块就代表着这个元素所定位的区域。” [Floatutorial]

“直到浮动框的外边框触碰到包含块的边缘或者是另一个浮动元素的外边框它才会停止向右或者向左排列。” [Floatutorial: Float Basics]

“当一个盒子被指定特殊样式时，它就会像它在常规流里一样会被垂直定位。它的顶部会和盒子当前行的顶部对齐。但是从水平方向来说，它会在块级的填充域中距离它的包含块往左或往右尽可能的远。（就像其他的文本内容一样）然后四周环绕的文本也会被设置成环绕在另一边。” [CSS Positioning: Floats]

“虽然浮动元素不在流中，但是未定位的块级框会在前后让这个浮动框垂直飘浮就好像float元素不存在一样。无论如何，由float元素产生的线框会被缩短从而让float框腾出空间。”在浮动框当前行下的任意内容都会在float元素的另一边的第一行重新浮动。“

[W3C Visual Formatting Model]

“对于浮动框来说在当前行下如果没有足够的水平空间，浮动框就会地换行显示，一行接着一行，直到某一行能够刚好容纳下它。




“[Floatutorial: Float Basics]

“对于一个浮动框从来不会在某一行的上边缘（浮动框产生的地方）之上结束。浮动框的上边缘会对准当前行边框的上边缘。（又或者对准上一个盒子的底部，如果这一行没有盒子的话）。“[Float Layouts]

“如果你想真正了解float元素的定义，你不得不去理解在CSS中线框到底为何物。很不幸的是，相反你还需要去理解何谓内联框架。内联盒子是由一些非块级等级元素生成的，例如em。其实一个线框就是一个虚构的矩形，在包含块级元素的情况下，它包含着所有在此行内的内联盒子。它至少和最高的线框是一样高的。” [Float Layouts]

“如果我们在一个div元素里的每一列都附上float:left的属性，它们会并排呈现在浏览器上，就像我们所期望的那样。然后如果我们想让在底部显示一个满宽的页脚，不论担心哪一列会特别长然后影响布局，我们只需要在页脚的属性加上clear:both属性就OK啦。” [Float Layouts]

“为了包含float元素而使用float的潜在缺点就是你太过依赖浏览器去一连串地解析如此层层嵌套的float元素布局。如果前面的 那些float布局仅仅是另一个更复杂的布局的一部分（可能使用了浮动，定位或者表格），那么我想情况可能会更加糟糕。” [Containing Floats]

清除float元素

“跟随在float元素的其他元素将会围绕着float元素来布局。如果你不想让这种情况发生，你可以选择用clear这个性质来应用于这些跟随环绕的元素。Clear的值有四种选择，分别是clear:left,clear:right,clear:both或者clear:none。” [Floats and “clear”]

“如何不用额外的标记来清除CSS的float元素——有各类的技巧来解决。”现阶段有三种主流的方法：a)依旧让这些包含的元素环绕b)使用overflow:hidden放置在标签容器中；c)生成的内容运用CSS的伪类 :after。A test-page for techniques. [How to clear CSS floats without extra markup]

“写出一个似乎带有嵌套的float属性的外容器的标准方法就是在容器的最后放置一个完整的clear元素，它会造成一些影响从而牵引着包含元素的盒子的下沿比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]

“有一个关于float属性的基础布局的常见问题，就是具有float属性的容器不会愿意扩展去容纳更多的含有float属性的元素。如果你真要去添加，譬如说，在所有的float元素周围的添加一条边框（在ie浏览器中容器的外面会有一条边框环绕的），此时你将不得不命令你的浏览器无论如何用尽各种方法来扩展你的容器。你可以通过使用overflow的属性来清除这些float属性。




[Clearing floats]

“使用 :after伪类元素：想象一下我们使用:after伪类元素来插入一个简单的单词例如像”period”,然后将它赋予一个常见的属性元素{clear:both;}。那是你真正需要做的工作，但是没人想让区区一行的内容毁掉了之前所有清晰容器的布局，所以我们要用一个{height:0;}和{visibility:hidden;}来让我们的展示效果得以完整。“代码如下：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

[How To Clear Floats Without Structural Markup]

“清除浮动：当一个浮动元素被一个具有看得见的边框或者背景的容器盒子所包裹的时候，float元素不会自主地使得容器的底部边缘下降和float元素有一样的高度。”反而float属性会被整个容器忽略并且含有float的元素会像一面旗帜一样下垂到容器底部的外面。然而IE浏览器将float元素“自动地”放置在容器的里面，但是只有在容器元素规定好尺寸的情况下。“[Easyclearing: How To Clear Floats Without Structural Markup]

CSS float 漏洞

“当容器元素在内部有链接的时候，它就会跟随具有float属性的元素。当这种情况发生时候，一些链接就会被附上hover行为，这种自动附加的行为会被固定或者说是”被切断“，接着会造成容器盒子下沿突然跳到没有float属性内容的底部。让其他元素附上hover伪类可以恢复这种行为。这种有意思的后果被理所应当叫成了IE/windows的切断漏洞。“这种锁定行为只有当用a:hover伪类来改变链接背景或者一些其他样式改变的时候（譬如说a标签下的padding,margin 或者一些font属性）才会发生。但是令人奇怪的是，在hover中让文本颜色发生变化却不会锁定这样的bug。”




[How To Clear Floats Without Structural Markup]

The IE Escaping Floats Bug: “如果使用了一个带边距的div盒子，所有的边框和大量浮动在左边的盒子，在IE浏览器中你将会得到两个显示错误。第一个，容器只会包含float元素的最后一行，并且这些float元素页会跑到右边，直接到整个屏幕的右边，导致在很多尺寸的屏幕上出现了水平的滚动条。解决方法：在IE浏览器中设置一个高度，这不会影响到整个容器的显示高度。这样是非常有可能的，因为在IE浏览器中有一套关于容积和尺寸非标准的行为。Holly 破解的方法是：给元素分配一个高度，”height:1%;“。”




The Win/IE6 Peekaboo bug:“在一个流体盒子里有一个float元素，并且靠着这个float元素的边外边有几行文本内容。在IE6浏览器中这些文本会消失。当你向下滚动的时候，或者也许切换到其他窗口，然后再返回的时候它又会重新显现出来（这样的长期bug到IE7发布的时候才得以解决）。”




“在IE浏览器下设定了向左浮动的块级会有3个像素值得右边距。无论你怎么做，这个边距依然在那里。我们来看一下它的运转过程，第一步检查了浮动的bug然后检查双重float定位。“这个bug也叫做IE三个像素的文本轻飘。”[Floating Bugs].

IE Duplicate Character Bug:

“在IE6浏览器有一个棘手的bug影响了很多个float元素；来自float元素最后的文本单词有时候会在float元素的最后进行一次复制。直接原因只不过是一些平常的html注释导致的，比如<!– end left column –>，挤进了逐一过来的float元素之间。“




[IE Duplicate Character Bug]

“当一个最正常不过的工作任务显示在一个网页上时，会让一些图像向左（或者向右）浮动起来目的是让文本内容围绕着它们。在float图像上添加了clear的属性确保了每一个元素都会排列在前一个的底下。然而，在同一元素下同时使用了float和clear性质会在IE浏览器中导致很多大缺口的出现。这些缺口需要我们使用比至今我们使用到过的CSS更复杂的CSS来解决它。“[Close Gaps Next to Floated Images in Internet Explorer]

“你在一个盒子容器中放置了一个向左浮动的元素，并且使用了一个左边距来让它远离了容器的左边。在IE浏览器中这个左边距会在距离上增长一倍！“ [The IE Doubled Float-Margin Bug]

“漏洞证明了这里会造成内联元素（比如图像还有文本）会邻近一些float盒子从而出现内联元素从它们将要坐落的位置开始缩进。这种凹陷的原因是由于IE浏览器中对float元素边距奇怪的处理方式。“[Floats, Margins and IE]

“有一个简单的方法解决了很多的IE浏览器关于float的漏洞。所有float元素都成了块级盒子；标准规定运用display性质可以将float元素的性质忽略掉，但是除掉它的属性值是none。如果我们在一个float元素中设定display:inline，很多IE浏览器的漏洞都会神奇般地消失了。IE浏览器不会让元素进入内联盒子，但是因此很多漏洞都会被解决。 “[Float Layouts]

“在Safari1.3和Safari2.0中，让元素里结合使用float和负值的边距可以使在元素中的任何链接都无法点击。文本中也会变得非常难以选中，而且如果你用tab键去遍历所有链接它们会在它们不选中的时候消失。有一个解决方案就是在每一个带有负值边距的float元素中向CSS中添加一个position:relative属性“[Float + negative margin problems in Safari]

“微软的IE7浏览器现在通过使包含float子元素的父级容器塌陷正确响应了W3C的规格。然而正如它不能解决生成的文本那样，这种方法理所应当被叫成简单的清除法则，在IE7中并不是一个清除浮动属性的方案。对于各种IE浏览器版本来说，用overflow属性的方法是最适合的解决方案。”

#content { overflow : hidden; _height : 1%; }

[Clearing floats without sructural markup in IE7]

CSS float 个别提示和技巧

Float Containing Rules By Browser




“此表格列出了一些主流浏览器对清除容器中float属性的兼容。”

CSS vertical centering using float and clear – crossbrowser

“当盒子固定在浏览器视角的中间。但当浏览器可视范围比盒子小的话文本内容就不会显现了。“

A floated page layout

“有一个小技巧是教你如何通过使用web标准和CSS样式创建像这样的页面布局。这样的布局会得到大量的使用，这是一个特别明显的图片库布局。我给链接页面不是很完全，我已经尽力去让它精简，所以我们可以集中注意力来解决图像和文本的布局。“

Build a better Web site by understanding floated elements in CSS

“这篇文章对这些float元素提供了一些简短的介绍，以及解释了CSS浮动属性和clear指令甚至提供了一些帮助你在网页中更好的定位这些HTML元素的案例。“

Create Columns with Floats

“通常情况下，现阶段有两种方法在CSS中创建成对的队列：运用绝对定位或者是float属性。绝大多数情况里，float元素都会成为你布局网页中的不二选择。在本篇指导中，你将会学习到使用float、width和margin属性来创建列表的视图。”

Safe Lists Next to Left-Floated Elements

“你有很多种方法去装饰html的列表。但是这些方法在所有的浏览器中和所有的环境中都使用吗？”在本篇文章中，我们将对一个简单的环境做出一个案例：创建一个一些向左浮动元素的列表。“

Creating Liquid Layouts with Negative Margins [and Floats]

“你可以有机会去演示一个CSS忽略的方面：负边距。负边距允许我们把文本区域远离浏览器的边缘，给侧边栏腾出空间。“

Image floats, without the text wrap!




”你有多少次在块级内容中设置了向左浮动的图像，但是想用整个文本去环绕你的图像？“

Floating an image to the right




将一个图像浮动到一块文本的右边，然后把一个边框添加到这个图像上。

Floating an image and caption




将图片和字幕同时浮动到一块文本的右边通过使用子选择器来添加这些边框。

Floating a series of “clear: right” images




使一系列图像向页面的右边浮动，使得文本内容环绕着它们。

Floating an image thumbnail gallery






将一系列的指甲盖大的图像和字幕来实现图片画廊

Floating next and back buttons using lists




Floating inline list items




Floating a scaleable drop cap




Liquid two column layout

通过header 和footer将nav元素向左浮动从而实现两列元素的排列。

Liquid three column layout

通过header和footer 标签将列向左或者向右移动实现三列布局。

CSS Float Html Tutorial

我们是时候跳出框外来考虑考虑了，或者，更精确地说，浮动在它的边上。我们在哪失去了我们对于CSS共同的创造力？从布局上说，跟传统的table表格来比，CSS给予了我们更多的自由。在以前，我们没有更多的选择，但是在现在……哎，真是遗憾！是时候去跳出盒子之外发挥我们的创造力了！