在学习浮动布局和定位布局之前,我们先来了解“正常文档流”和“脱离文档流”。深入了解这两个概念,是学习浮动布局和定位布局的理论前提。
一、正常文档流
什么叫“文档流”?简单来说,就是指元素在页面中出现的先后顺序。那什么叫“正常文档流”呢?
正常文档流,又称为“普通文档流”或“普通流”,也就是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元素跑到父元素的上面去了。也就是说,设置了定位使得元素脱离了文档流。
对于浮动和定位,我们在接下来的两章就给大家详细介绍。