CSS布局中說到定位就不得不提浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
### 一，float屬性的定義和用法
float屬性：設置元素浮動
可能的值：
none 不浮動，在文檔流內，默認
left ?左浮動，脫離文檔流
right 右浮動，脫離文檔流
inherit規定應該從父元素繼承 float屬性的值。
float屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
我們用圖示和實例來理解元素的浮動：
(1)三個不浮動元素的圖示和效果：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局之漂浮</title>
<style type="text/css">
#test {
border:#FF00FF solid 1px;
width:700px;
height:400px;
margin:auto;
}
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
}
#div_2 {
background-color:#FFFF00;
width:200px;
height:100px;
}
#div_3 {
background-color:#FF0000;
width:200px;
height:100px;
}
</style>
</head>
<body>
<div id="test">
<div id="div_1">區域1</div>
<div id="div_2">區域2</div>
<div id="div_3">區域3</div>
</div>
</body>
</html>
~~~
當沒有設置元素浮動的時候，由于我們使用的是div元素是塊級元素，我們看到三個元素依次排列到元素的下面，而不會是接著元素排列。
(2)第一個元素向左浮動的圖示和效果：
改寫第一個元素向左浮動的代碼：
~~~
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
float:left;
}
~~~
當元素1向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了元素2，使元素2從視圖中消失。
(3)第一個元素向右浮動的圖示和效果：
改寫第一個元素向右浮動的代碼：
~~~
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
float:right;
}
~~~
當把元素1向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣。
(4)設置三個元素均向左浮動的圖示和效果：
改寫三個元素都向左浮動的代碼：
~~~
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
float:left;
}
#div_2 {
background-color:#FFFF00;
width:200px;
height:100px;
float:left;
}
#div_3 {
background-color:#FF0000;
width:200px;
height:100px;
float:left;
}
~~~
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直碰到前一個浮動框。
(5)如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局之漂浮</title>
<style type="text/css">
#test {
border:#FF00FF solid 1px;
width:500px;
height:400px;
margin:auto;
}
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
float:left;
}
#div_2 {
background-color:#FFFF00;
width:200px;
height:100px;
float:left;
}
#div_3 {
background-color:#FF0000;
width:200px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div id="test">
<div id="div_1">區域1</div>
<div id="div_2">區域2</div>
<div id="div_3">區域3</div>
</div>
</body>
</html>
~~~
(6)如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
改寫第一個元素的高度的代碼：
~~~
#div_1 {
background-color:#00FF00;
width:200px;
height:150px;
float:left;
}
~~~
那么我們會在第二個實例中看到浮動元素遮住了文檔流的區域，那么我們怎么做，才能看到元素2的內容呢？下面我們就來解決這個問題：使用clear屬性。
### 二，clear屬性
浮動清除的定義和用法
clear屬性規定元素的哪一側不允許其他浮動元素。在CSS1和CSS2中，這是通過自動為清除元素（即設置了clear屬性的元素）增加上外邊距實現的。在CSS2.1中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改
變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
可能的值
left?在左側不允許浮動元素。
right?在右側不允許浮動元素。
both?在左右兩側均不允許浮動元素。
none?默認值。允許浮動元素出現在兩側。
inherit規定應該從父元素繼承 clear 屬性的值。
我們用圖示和實例來理解元素的清除浮動：
實例：先回過頭來看實例(2)的效果，我們設置第二個元素有清除浮動元素屬性：
~~~
#div_2 {
background-color:#FFFF00;
width:200px;
height:100px;
clear:left;
}
~~~
### 三，浮動和清除浮動的結合
我們先來看個例子：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局</title>
<style type="text/css">
#test {
margin:auto;
}
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
float:left;
}
#div_2 {
background-color:#FFFF00;
width:200px;
height:100px;
float:left;
}
#div_3 {
background-color:#FF0000;
width:200px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div>歡迎訪問某某網站</div>
<div id="test">
<div id="div_1">區域1</div>
<div id="div_2">區域2</div>
<div id="div_3">區域3</div>
</div>
<div>這是一些文本內容</div>
</body>
</html>
~~~
我們從結果中看出浮動的元素并沒有融入到我們編輯的整個文檔流中，從布局來看，文本內容應該緊接著區域塊的內容向下另起一行排列，但是并沒有達到預期的效果。
如何讓浮動元素融入到整個文檔流布局中？
結合實際我們找到了一個可行的方法，在浮動元素的區域塊中再添加一個div，設置這個div為清除浮動屬性，這樣浮動元素就真實存在文檔流中。
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局</title>
<style type="text/css">
#test {
margin:auto;
}
#div_1 {
background-color:#00FF00;
width:200px;
height:100px;
float:left;
}
#div_2 {
background-color:#FFFF00;
width:200px;
height:100px;
float:left;
}
#div_3 {
background-color:#FF0000;
width:200px;
height:100px;
float:left;
}
#clear {
clear:both;
}
</style>
</head>
<body>
<div>歡迎訪問某某網站</div>
<div id="test">
<div id="div_1">區域1</div>
<div id="div_2">區域2</div>
<div id="div_3">區域3</div>
<div id="clear"></div>
</div>
<div>這是一些文本內容</div>
</body>
</html>
~~~
看一下效果：
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化