在学习浮动布局和定位布局之前,我们先来了解“正常文档流”和“脱离文档流”。深入了解这两个概念,是学习浮动布局和定位布局的理论前提。

一、正常文档流

什么叫“文档流”?简单来说,就是指元素在页面中出现的先后顺序。那什么叫“正常文档流”呢?

正常文档流,又称为“普通文档流”或“普通流”,也就是W3C标准所说的“normal flow”。我们先来看一下正常文档流的简单定义:“正常文档流,将一个页面从上到下分为一行一行,其中块元素独占一行,相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说,正常文档流指的就是默认情况下页面元素的布局情况。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div></div> <span></span><span></span> <p></p> <span></span><i></i> <img /> <hr /> </body> </html>

上面HTML代码的正常文档流如下图所示。

分析:

由于div、p、hr都是块元素,因此独占一行。而span、i、img都是行内元素,因此如果两个行内元素相邻,就会位于同一行,并且从左到右排列。

二、脱离文档流

脱离文档流,指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说,如果我们想要改变正常文档流,可以使用有两种方法:浮动和定位

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*定义父元素样式*/ #father { width:300px; background-color:#0C6A9D; border:1px solid silver; } /*定义子元素样式*/ #father div { padding:10px; margin:15px; border:2px dashed red; background-color:#FCD568; } </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> <div id="son3">box3</div> </div> </body> </html>

在浏览器预览效果如下图所示。

分析:

上面定义了3个div元素。对于这个HTML来说,正常文档流指的就是从上到下依次显示这3个div元素。由于div是块元素,因此每个div元素独占一行。

1.设置浮动

当我们为第2、3个div元素设置左浮动时,在浏览器预览效果如下图所示。

正常文档流情况下,div是块元素会独占一行。但是由于设置了浮动,第2、3个div元素却是并列一行,并且跑到父元素之外,跟正常文档流不一样。也就是说,设置浮动使得元素脱离了正常文档流。

2.设置定位

当我们为第3个div元素设置绝对定位的时候,浏览器预览效果如下图所示。

由于设置了定位,第3个div元素跑到父元素的上面去了。也就是说,设置了定位使得元素脱离了文档流。

对于浮动和定位,我们在接下来的两章就给大家详细介绍。