盒子的三种定位形式
在标准流下的定位
在浮动属性下的定位
在定位属性下的定位
除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位
顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。
盒子的浮动
在标准流中，块级元素的盒子都是上下排列，行内元素 的盒子都是左右排列
如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的
指定者也想到了这样排列限制的问题，因此有给出了浮动和定位方式进行盒子的排列
从而使排版的灵活性大大提高。
例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容
所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动属性使盒子在浮动方式下定位。
在标准流中，一个块级元素在水平方向自动伸展，在他的父元素中占满一行；而在竖直方向和其他元素依次排列，不能并排，使用
浮动方式后，这种排列方式就会发生改变
CSS中有一个float属性，默认值为none,也就是标准流通常的情况，如果将float属性的值设为left或者right，元素就会向其父元素
的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。
盒子的浮动主要是排版使用，我们默认DIVtable标签做出来的内容都是2D
浮动的清除
clear是清除浮动属性，它的取值有left、right、both和none(默认值)，如果设置盒子的清除属性clear值为left或right,表示该盒子
左边和右边不允许有浮动的对象。设为both，表示两边都不可以有浮动的对象，因此该盒子将会在浏览器中另起一行显示。
CSS position
CSS定位（positioning）属性允许你对元素进行定位
CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，
还可以完成多年来通常需要使用多个表格才能完成的任务。
CSS定位机制
CSS有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素位置由元素在（X）HTML中的位置决定
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的。
CSS position属性
通过使用position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。
position属性值的含义：
static（默认值）元素框正常生成。块级元素生成一个矩形框，作为文框流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute元素框从文档流完全删除，并相对于其包含块定位。包含快可能是文档中的另一个元素或者是初始块。元素原先在正常流中
所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它的正常流中生成何种类型框。
fixed元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。（滚动条滚动时fixed的盒子一直浮动在固定位置）
position:fixed;
top:0px;
left:500px;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>float</title>
<style>
#header
{ width: 1000px;
height: 100px;
background-color: blue;
margin:auto;/*自然居中*/
text-align: center;
}
#container
{ width: 1000px;
height: 50px;
background-color: gray;
margin:auto;/*自然居中*/
text-align: center;
}
#main
{ width: 1000px;
background-color: steelblue;
margin:auto;/*自然居中*/
}
#nav
{ width: 200px;
height: 500px;
background-color: red;
margin: 0px 10px;/*上右下左*/
float: left;
}
#content
{ width: 500px;
height: 500px;
background-color: green;
margin: 0px 10px;/*上右下左*/
float: left;
}
#side
{ width: 200px;
height: 500px;
background-color: blue;
margin: 0px 10px;/*上右下左*/
float: left;
}
#footer
{ width: 1000px;
height: 30px;
background-color: bisque;
margin:auto;/*自然居中*/
clear: both;
text-align: right;
}
</style>
</head>
<body>
<div id="header">顶部</div>
<div id="container">内容</div>
<div id="main">主体
<div id="nav">左边</div>
<div id="content">主内容</div>
<div id="side">右边框</div>
<div id="footer">地址：xxxxx 电话：xxxxxx</div>
</div>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/2553604/blog/812342