文档流概念
元素自上而下，自左而右，块元素独占一行，行内元素在一行显示，碰到父元素的边框换行。
浮动布局
（大盒子在同一行显示）
float: left | right
特点：
- 元素浮动后不占据原来的位置（脱离标准流）
- 浮动的盒子在一行显示
- 行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display:inline-block;）
浮动作用
- 文本绕图
- 制作导航
- 网页布局
制作导航
<html>
<head>
<title>格式清零</title>
<style type="text/css">
body,ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
}
.nav{
height:55px;
background:url("head_bg.jpg");
margin-top:30px;
border-top:1px solid #666;
.nav-con{
width:1000px;
margin:0 auto;
}
.nav-con ul li{
float:left;
background:url("li.png") no-repeat right;
height:55px;
padding:0 20px;
}
.nav-con ul li a{
display:inline-block;
height:55px;
font:18px/55px 微软雅黑；
text-decoration:none;
color:#000;
}
.nav-con ul li a:hover{
color:green;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-con">
<ul>
<li><a href="#">智能手机</a></li>
<li><a href="#">智能手机</a></li>
<li><a href="#">智能手机</a></li>
</ul>
</div>
</div>
</body>
</html>网页布局