float,position,relative,absolute,文档流这些关键术语解惑（一）-CSDN博客

在CSS编程中，相信很多人对于上面标题中的这些术语有很大的疑惑，接下来让我们一点点拨开它们的神秘面纱，以及纠正几个关键性的错误，通篇文章我就不提供图示了，我想能看到我这篇文章的人估计也对这些术语表现出来的图示已经很清楚了，这里就不再麻烦上图了。

在解释之前，首先说几本CSS的经典之作（要搞前台的人应该必读的）：

1，Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 这是最最权威的手册，是标准规范，可惜是英文的，实际上那些翻译人士完全可以出版一本这样的中文版。

2，CSS: The Definitive Guide, 3rd Edition，这是O'Reilly出的书，有中文版《CSS权威指南》，这本书不错的。

好了，我们开始进入我们的话题：

首先，我们来一段英语和语文知识，"The stream flow to the sea"，翻译成中文：“溪流流向大海”。嗯，英文很好理解，stream：溪流，flow：流向。但是中文呢？“溪流”可以缩减成一个“流”字，那么这句话就成了“流流向大海”，晕了，2个流，连起来读读看“流流”。嗯，我说到这里，估计有些相当聪明的人马上醒悟到了，马上醒悟到困惑他多年的疑问解决了。嗯，困惑大家的原来是中文和英文的翻译歧义造成的，“流流”，第一个“流”是名词，翻译自stream，表示实实在在的内容，类似文件流（编程的人最熟悉这个了，文件操作么太重要了，什么InputStream,OutputStream）。第二个“流”是动词，翻译自flow，表示“流向”。

搞明白了“流”的关键以后，接着让我们再继续挖掘下去：

the normal flow of the document，让我们好好翻译这句话：文档的正常流向。嗯，这个时候最最关键的问题来了，咱们中国人一向惜字如金，曾经在很小的时候，就给我们灌输中文的奥妙之处，比如”僧敲月门下“，到底是敲好呢，还是推的好，字字斟酌过去。于是翻译上面一句话的时候，有些聪明人士就开始玩起中文的奥妙来了，翻译成了”文档的正常流“，嗯，这个还算是好的，更绝的是翻译成了”文档流“。嗯，我写到这里，相信所有的大家都应该明白了，问题原来出在这里。你翻译成了”文档流“了，误导了大家，因为”文档流“是名词，根据词面上的意思以及程序员的编程经历，理所应当的认为是文档的流内容了，倒翻过去，应该是document stream，一个英文单词的差别，意义可是千差万别了。至于翻译成”文档的正常流“也存在同样的问题，尽管比”文档流“稍微好点。

好了，搞明白了上面的翻译问题，让我们回到CSS Specification中，看看它是如何解释”文档的正常流向“（千万不要缩减成”文档流“哦，以后永远记住了）。

在http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme中说道：

In CSS 2.1, a box may be laid out according to three positioning schemes:

Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
Floats. In the float model, a box is first laid out according to 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.
Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

让我这里稍微解释一下：（有些翻译上的细节我就不考虑了，大致意思不会出错即可）

一个box的布局满足3种定位模式：

1，正常流向：块级、行内、以及相对定位的那些元素。

2，浮动：首先根据正常流向布局，然后脱离正常流向（意思是：不再是正常流向了）浮动到左边或者右边，box内的剩余内容沿着这个浮动元素的周围布局。

3，绝对定位：box从正常流向中完全移除（意思是：和上面的float相比，就根本没有正常流向过）。

嗯，看到这里，大家就开始摇头了，这还是没有说明白啊，而且越说我越糊涂了。嗯，我知道你在想什么，呵呵。

上面这一段是为了解释”脱离（移除）文档正常流向“这个概念的，而不是解释”浮动、定位“这些具体含义的。再强调一下：”脱离（移除）文档正常流向“是指：不再是文档的正常流向了。和文档的流内容、空间没有任何关系。或者更直白一点说：不再是是文档的正常布局了，而是发生变化的布局。

举个例子说一下：一个div，没有任何样式的时候，属于”块级元素“，那么应该符合上面3种定位模式中的”正常流向“模式，假如给这个div加上float:left属性，那么 the div has been taken out of the normal flow of the document，也就是不再是正常流向了，那么属于什么啊？恩，只有3种模式，不属于正常流向，应该属于”浮动“这个模式。那么对于浏览器引擎来说，就采用”浮动“这种模式的渲染引擎来处理该div。

其实呢，这篇文章按理说到这里该结束了，但是看的人估计有些着急了，看了大半天还没有看到他所要的内容，估计要开口大骂了，嗯，那好吧，下面我就稍微用可以理解的比喻来说明float,position,static,relative,absolute这些概念，不过，有一点事先说了，这里一没有图，二不是那种超级详细的解释，只是解释几个你心中的疑问罢了。

嗯，下班了，第二篇再说了。