-1文档流与非文档流。
一、首先，按照普通流和非普通流来分类：
①普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。
②非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，position包括：static，relative，absolute，fixed四种值。其中static是属于普通流；relative也是属于特殊的普通流，详细下面有介绍；absolute和fixed以及float就是属于非普通流的，加载的时候，也会顺序加载，但是会脱离普通流的位置。
看代码：
普通的文档流：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa;
top: 0;left: 0;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
显示如图：
2个DIV都是文档流，都是行级元素，所有都占一行。
脱离文档流：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa;
top: 0;left: 0;
float: left;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
这里的用浮动脱离文档流，所以在父DIV中，当它不存在宽和高。
- 2float和绝对定位的区别
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
- 1
- 2
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
就别就是文本的区别：
浮动：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa; float: left;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>i am float
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以看到文本会环绕浮动的盒子。
绝对定位：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;position: relative;}
.b{
position: absolute;height:100px;width:100px;background-color:#aaa; top: 0; left: 0;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div> position: absolute
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以看到文本是无视绝对定位的盒子的。。。。。
-1文档流与非文档流。
一、首先，按照普通流和非普通流来分类：
①普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。
②非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，position包括：static，relative，absolute，fixed四种值。其中static是属于普通流；relative也是属于特殊的普通流，详细下面有介绍；absolute和fixed以及float就是属于非普通流的，加载的时候，也会顺序加载，但是会脱离普通流的位置。
看代码：
普通的文档流：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa;
top: 0;left: 0;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
显示如图：
2个DIV都是文档流，都是行级元素，所有都占一行。
脱离文档流：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa;
top: 0;left: 0;
float: left;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
这里的用浮动脱离文档流，所以在父DIV中，当它不存在宽和高。
- 2float和绝对定位的区别
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
- 1
- 2
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
就别就是文本的区别：
浮动：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;}
.b{
height:100px;width:100px;background-color:#aaa; float: left;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div>i am float
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以看到文本会环绕浮动的盒子。
绝对定位：
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{border:1px solid red;width:960px;margin:0 auto;position: relative;}
.b{
position: absolute;height:100px;width:100px;background-color:#aaa; top: 0; left: 0;
}
.c{height:50px;background-color:#ddd;}
</style>
</head>
<body>
<div class = "a">
<div class = "b"></div> position: absolute
<div class = "c"></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以看到文本是无视绝对定位的盒子的。。。。。