文档流：浏览器根据元素在html文档中出现的顺序，从左向右，从上到下依次排列。
浮动属性是CSS中的定位属性，用法如下：
float: 浮动方向(left、right、none);
left为左浮动、right为右浮动、none是默认值表示不浮动
设置元素的浮动，该元素将脱离文档流，向左或向右移动
直到它的外边距碰到父元素的边框或另一个浮动元素的边
框为止
float用法（主要用于块级元素的并排）：
1、block块级元素不指定width的话，默认是100%（即会占一整行）。
2、block块级元素不指定width但加入float浮动后，其width会根据其内容长度动态改变，其他块级元素可能会在其左边或右边加入。
3、block块级元素指定width但加入float浮动后，其width不会根据其内容长度动态改变（文字可能溢出），其他块级元素可能会在其左边或右边加入。
4、block块级元素加入float浮动后，会脱离标准文档流，向左或向右移动直到它的外边距碰到父元素的边框或另一个浮动元素的边框为止。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
body{
margin: 0px auto;
padding: 0px;
}
.container{
width: 500px;
height: 500px;
border: 1px solid red;
margin:0px auto;/*主面板DIV居中*/
}
.header{
height: 100px;
border: 1px solid red;
float: left; /*加入浮动*/
}
.main{
height: 100px;
width: 100px;
border: 1px solid red;
float: left; /*加入浮动*/
}
.footer{
height: 100px;
width: 100px;
border: 1px solid red;
float: right; /*加入浮动*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">
头部
</div>
<div class="main">
中间
</div>
<div class="footer">
脚部
</div>
</div>
</body>
</html>