一、什麼是定位和浮動
CSS爲定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
二、CSS定位機制
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。CSS中定位的基本元素是框。
三、框的類型及轉換方法
1.框的類型
HTML提供了豐富的標籤，這些標籤定義成了不同的類型，一般分爲塊標籤和行內標籤。在CSS中，這些標籤都爲“框”。
塊標籤（塊框）：以區域塊方式出現。每個塊標籤獨自佔據一整行或多行。
·常見的塊標籤：<h1>,<div>,<ul>等。
行內標籤（行內框）：不必在新的一行開始，也不強迫其他元素在新的一行開始。
·常見的行內標籤：<span>,<a>等。
2.框類型轉換
可以使用display屬性來改變框的類型，比如在開發中，希望行內元素具有塊元素的屬性（或是反過來），則需要使用display進行轉換。
display:
inline;（此元素將顯示爲行內元素）
block;（此元素將顯示爲塊元素）
inline-block;（將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞）
none;（此元素將被隱藏，不顯示也不佔用頁面空間）
三、相對定位和絕對定位
通過使用position屬性，可以選擇不同的定位方式。
1.絕對定位 absolute
絕對定位的原點在父容器的左上角。
例如：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>
2.相對定位 relative
相對於自己原來的位置（左上角爲原點）。
例如：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>
四、浮動-float屬性
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。在 CSS 中，我們通過 float 屬性實現元素的浮動。
示例：
1.無浮動的三個塊框，每個框佔據一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動示例</title>
<style type="text/css">
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
#d1{
background-color: aquamarine;
}
#d2{
background-color: brown;
}
#d3{
background-color: chartreuse;
}
</style>
</head>
<body>
<div id="d1">11</div>
<div id="d2">22</div>
<div id="d3">33</div>
</body>
</html>
2.設置框11爲向右浮動，11框脫離原順序流向右移動到11框邊緣碰到父容器右邊緣。
#d1{
background-color: aquamarine;
float:right;
}
3.再將11框設置爲向左浮動，11框將會回到原位置並且顯示在22框上方（覆蓋22框），因爲11框脫離了原順序流。
4.將三個框全部設置爲向左浮動，則框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
div{
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
}
5.如果包含框（父容器）太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。
6.如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”。如將11框高度增加，33框在下移時會被卡到與22框在同一列的位置。
7.浮動的塊框與行框。浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創建浮動框可以使文本圍繞圖像。
a)無浮動的塊框與行框，塊框單獨佔據一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動示例</title>
<style type="text/css">
div{
border: 1px solid black;
width: 300px;
height: 100px;
/*float: left;*/
}
</style>
</head>
<body>
<div>
<img src="img/tomcat.jpg" width="100%" height="100%"/>
</div>
<p>內容</p>
</body>
</html>
b)將塊框設置爲向左浮動後，行框自動圍繞塊框。
五、浮動-clear屬性，overflow屬性
1.clear 屬性規定元素的哪一側不允許其他浮動元素。
取值：
left;在左側不允許出現浮動元素。
right;在右側不允許浮動元素。
both;在兩側不允許浮動元素。
none;允許浮動元素出現在兩側。（默認值）
2.overflow 屬性規定當內容溢出元素框時發生的事情。
取值：
visible;內容不會被剪輯，但會呈現在元素之外。（默認值）
hidden;內容會被剪輯，並且其餘內容是不可見的。
scroll;內容會被剪輯，但是瀏覽器會顯示滾動條以便查看未顯示的內容。
auto;如果內容被剪輯，則添加滾動條。
inherit;繼承父元素的overflow值。
六、元素的堆疊
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。（z-index 僅能在定位元素上奏效，例如 position:absolute;）
取值：數字；數值越大顯示時越靠上。