今天來談談網頁設計中的float定位和position定位，這兩個在網頁排版中是必不可少的操作，當然float其實用得更多。
一、float浮動
1、文檔流
指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。脫離文檔流也就是不遵循普通的佈局排版，採用自己設定的規則來排版。能夠脫離文檔流的兩個方法是使用float和position中的absolute。
2、塊級元素與內聯元素
前幾篇文章中都提到了塊級（block）標籤和內聯（inline）標籤，其實這些標籤就是所謂的塊級元素和內聯元素。常見的都有以下幾種，
- 塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
塊級元素通常被現實爲獨立的一塊，獨佔一行，多個塊級就是佔多行；
block元素可以設置width、height屬性，但內聯元素不行；
內聯元素可以多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行。
3、浮動的定義
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之後的塊框表現得就像浮動框不存在一樣。
浮動最有效的作用就是能夠讓原本無法擺放在同一行的塊級標籤擺放在同一行。
4、float浮動的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width:100px;
height: 100px;
background-color: pink;
float:left;
}
.div2{
width:200px;
height: 100px;
background-color: deeppink;
/*float:left;*/
}
.div3{
width:100px;
height: 200px;
background-color: red;
float:left;
}
.div4{
width:200px;
height: 200px;
background-color: darkred;
/*float:left;*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
（1）初始狀態，即將所有float浮動效果註釋掉，原本的效果是這樣的：
在圖裏，div1的顏色最淺，div2、div3、div4的顏色依次加深。
（2）當我們把div1，div2，div3都添加向左浮動時（div4不加），就出現了這樣的效果：
這種效果的產生，是因爲div1(粉)、div2(深粉)、div3(紅)這三個個塊級標籤都是浮動狀態的，就好像是飄着的，而div4不是飄着的，是在地上的，所以就補充上位，佔了第一行的位置。而對於div1(粉)、div2(深粉)、div3(紅)都是飄着的，飄着也是有次序的，因此從左到右依次飄在第一行的“空中”，此時div4(深紅)是在第一行的“地上”。
（3）當我們僅將div1和div3設置成向左浮動，就出現了這樣的效果：
首先div1(粉)飄在第一行的空中，div2(深粉)補充上位，div1僅佔div2的一半大小，因此只能在“空中”蓋住div2的一半。由於div3(紅)也是飄着的，div4(深紅)補充上位，因爲div3只佔div4的一半大小，所以也只在空中覆蓋div4的一半。
4、float浮動的清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container{
border:1px solid red;
width:300px;
}
#box1{
background-color: green;
float:left;
width:100px;
height:100px;
}
#box2{
background-color:deeppink;
float:right;
width:100px;
height:100px;
}
#box3{
background-color:pink;
height:40px;
}
.container:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div id="box1">box1 向左浮動</div>
<div id="box2">box2 向右浮動</div>
<!-- 清除浮動-->
<!-- <div style="clear:both"></div>-->
</div>
<div id="box3">box3</div>
</body>
</body>
</html>
不添加浮動的狀態是這樣：
對box1（綠色）和box2（深粉）添加浮動後效果是這樣：
假如我們並不想要這種效果，而是想要把粉色長條移到box1和box2的底下，有以下兩種常用的方法可以做到，
一是在box1和box2的下面再添加一個塊級div標籤，設置風格爲clear:both，即：
<div style="clear:both"></div>
二是使用僞類操作（更加靈活），即：
.container:after{
content:"";
display:block;
clear:both;
}
最終達到的效果是這樣：
5、clear語法補充
clear : none | left | right | both
取值：
- none : 默認值。允許兩邊都可以有浮動對象
- left : 不允許左邊有浮動對象
- right : 不允許右邊有浮動對象
- both : 不允許有浮動對象
二、position定位
1、static靜態
position的默認參數是static，即無定位。此時即使設置了left、top等參數也沒有效果，因爲它沒有參照物。
假如我們將沒有定位作爲初始狀態，它的效果是這樣的：
圖中，div1(粉)、div2(深粉)、div3(紅)，div4(深紅)。
2、relative相對定位
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置爲參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
將div2(深粉)設置了相對定位的效果是這樣的：
3、absolute絕對定位
置爲絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
對div2(粉)設置了絕對定位的效果是這樣的：
很顯然，div2的位置直接被div3給佔了。
4、fixed固定座標
對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性 定義。
注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這
是一個常識性的知識點，因爲這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative
卻可以。因爲它原本所佔的空間仍然佔據文檔流。
也就是說，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
給div2加了fixed固定定位後，同時將原來的div1、div3、div4都複製一遍，以出現滾動條，效果是這樣的：
可以很清楚得看到，div2固定在網頁的一個位置不會變化。
5、測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
}
.div1{
width:200px;
height: 100px;
background-color: pink;
}
.div2{
width:200px;
height: 100px;
background-color: deeppink;
/*position:relative;*/
/*left:100px;*/
/*top:100px;*/
/*position:absolute;*/
/*left:100px;*/
/*top:100px;*/
position:fixed;
left:100px;
top:100px;
}
.div3{
width:200px;
height: 200px;
background-color: red;
}
.div4{
width:200px;
height: 200px;
background-color: darkred;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div1"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>