在網頁中使用浮動屬性，可以更改塊元素的預設顯示方式，将原本換行顯示的塊元素同行顯示，通過使用浮動元素和盒模型中的各種屬性，可以對各種頁面元素進行布局。
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> 
注意幾個元素之間的排列順序。