div布局中对浮动的理解
首先，我们要知道：在标准流的情况下，div块的排列顺序为按照html代码从上自下依次排列。但是在我们设置了浮动（flaot）属性后，div块的排列顺序有所改变。
实验代码：
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
height: 100%;
margin: 0;
}
#container{
width: 100%;
height: 100%;
background-color: aqua;
}
#heading{
width: 10%;
height:10%;
background-color:darkcyan;
}
#content_menu{
width: 30%;
height: 20%;
background-color: blue;
}
#content_body{
width: 30%;
height: 20%;
background-color: blueviolet;
}
#footing{
width: 10%;
height: 10%;
background-color: brown;
}
</style>
</head>
<body>
<div ID="container">
<div ID="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
这是标准流中的div块的排列情况：
然后我们对heading部分设置为向左浮动：
#heading{
width: 10%;
height:10%;
background-color:darkcyan;
float:left;
此时的排列情况为：
继续对content_menu部分设置为向左浮动：
#content_menu{
width: 30%;
height: 20%;
background-color: blue;
float:left;
}
可见结果为：