在网页中使用浮动属性，可以更改块元素的默认显示方式，将原本换行显示的块元素同行显示，通过使用浮动元素和盒模型中的各种属性，可以对各种页面元素进行布局。
1. 元素的浮动属性float
用来定义块元素的浮动方式，在浮动属性中，可以使用4种属性值，分别为static，absolute，fixed和relative，
float: none | left | right
none：元素不浮动
left：元素浮动在左侧
right：元素浮动在右侧
2：浮动元素和固定元素
在制作页面的时候，如果相邻的两个元素中一个为浮动元素，另一个为固定元素，则最终的显示效果和元素之间的位置有关，如果浮动元素处于固定元素之前，
则固定元素和浮动元素同行显示，如果浮动元素处于固定元素之后，则浮动元素换行显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.float {
float: left;
width: 200px;
height: 100px;
background: #999999;
}
.nofloat {
width: 400px;
height: 100px;
background: #666666;
}
.float2 {
background: #333333;
}
</style>
</head>
<body>
<div class="float">这是一个浮动元素</div>
<div class="nofloat">这是一个固定元素</div>
<div class="float float2">这是一个浮动元素</div>
</body>
</html> 
如上图所示，第一个元素和第二个元素将同行显示，第三个元素将换行显示，因为第3个元素为浮动元素，而第2个元素为固定元素，所以第3个元素换行显示。
3. 多个浮动元素的显示顺序
在制作页面的时候，如果同时使用多个浮动元素，页面会按照浮动元素定义的先后对元素进行排列，后定义的元素默认排列在先定义的元素的旁边。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.float1 {
float: left;
background: #333333;
}
.float2 {
float: right;
background: #666666;
}
.float3 {
float: left;
background: #999999;
}
.float4 {
float: right;
background: #cccccc;
}
div {
width: 150px;
height: 75px;
}
</style>
</head>
<body>
<div class="float1">float1</div>
<div class="float2">float2</div>
<div class="float3">float3</div>
<div class="float4">float4</div>
</body>
</html> 
注意几个元素之间的排列顺序。