css概述（续2）
1.文档流
文档流指的是文档中的标签在排列时所占用的位置。将长提自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。
在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
2.浮动
浮动是使标签脱离原来的文档流，在父标签中浮动起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"> #div{ margin: 0px auto; width: 504px; } .box_1{ float: left; background-color: fuchsia; color: aliceblue; padding: 10px 20px; margin: 10px auto; } #box2{ width: 504px; height: 400px; background-color: aqua; } .box2_1{ background-color: gold; } .box2_2{ background-color: brown; } .box2_3{ background-color: darkorange; } .box2_1,.box2_2,.box2_3{ height: 300px; width: 168px; float: left; } </style>
</head>
<body >
<div id="div">
<div id="box">
<div class="box_1">首页</div>
<div class="box_1">热门</div>
<div class="box_1">关注</div>
<div class="box_1">同城</div>
<div class="box_1">榜单</div>
<div class="box_1">明星</div>
<div class="box_1">国际</div>
<!--浮动会使标签完全脱离文档流，不在文档中占用位置，也就是浮动标签不会撑开父标签 clear属性可以用于清除标签周围的浮动对标签的影响，使其他标签的位置不发生变化 它的值对应浮动属性的值：left 忽略左侧浮动 right 忽略右侧浮动 both 忽略全部浮动 我们一般在浮动标签的后面加一个空白div标签来清除浮动标签的影响 -->
<div style="clear: left;"></div>
</div>
<div id="box2">
<div class="box2_1">左</div>
<div class="box2_2">中</div>
<div class="box2_3">右</div>
<div style="clear: left;"></div>
<div class="box2_4">下</div>
</div>
</div>
</body>
</html>
上述代码实现结果如下：（网页中通过浮动来布局，如下图所示，我们可以在左、中、右、下来布置我们想要的内容。）
3.css定位
定位就是允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
它分为三种：相对定位、绝对定位、固定定位
（1）相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> #box1{ background-color: #ffaaff; width: 100px; height: 100px; position: relative; left: 100px; top: 100px; } #box2{ background-color: #0055ff; width: 100px; height: 100px; } </style>
</head>
<body>
<div id="box1">
开启相对定位的区域
</div>
<div id="box2">
对照区域
</div>
</body>
</html>
上述代码实现结果如下：
（2）绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> #box1{ background-color: #00FFFF; width: 100px; height: 100px; position: absolute; left: 100px; top: 100px; } #div1{ background-color: #00aaff; width: 200px; height: 200px; position: relative; } </style>
</head>
<body>
<div id="div1">
对照区域
<div id="box1">
移动区域
</div>
</div>
</body>
</html>
上述代码实现结果如下：
（3）固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!-- 固定定位是把使用了固定定位的标签 固定在某个位置，即便滑动鼠标，该标签位置不变 通过position: fixed;来开启固定定位 left right top bottom 来设置偏移量。 它是相对于浏览器窗口进行定位的。 -->
<div style="height: 21px; position: fixed;top: 0px;left: 20px;">
<a href="#p1">产品1</a>
<a href="#p2">产品2</a>
<a href="#p3">产品3</a>
<a href="#p4">产品4</a>
<a href="#p5">产品5</a></div>
<hr />
<h3>产品1 <a name="p1"></a> </h3>
<img src="img/1.png" />
<h3>产品2 <a name="p2"></a></h3>
<img src="img/2.png" />
<h3>产品3 <a name="p3"></a></h3>
<img src="img/3.png" />
<h3>产品4 <a name="p4"></a></h3>
<img src="img/4.png" />
<h3>产品5 <a name="p5"></a></h3>
<img src="img/5.png" />
<hr />
<a href="#top" style="position: fixed;right: 20px;bottom: 20px;">返回顶部</a>
</body>
</html>
上述代码实现结果如下：（上述代码对 下图中的顶部蓝色字体以及右下角的 “返回顶部”使用了固定定位，即使滚动鼠标，这两个位置的内容也不会移动。）
