浮動
float屬性可以設置的值為none,left,right.對於設置了浮動的元素，會向其父元素的左側或右側緊靠，默認情況下，盒子的寬度不再伸展，而是根據盒子里面的內容來確定。浮動可以讓一個元素移到它所在行的某一邊，使得其他內容沿着該元素的邊緣向下流。
浮動的盒子會脫離文檔流，形成環繞的效果。
脫離文檔流
當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 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> <title>float</title> <style type="text/css"> body{ margin:15px; font-family:Arial; font-size:12px; } .father{ background-color:#ffff99; border:1px solid #111111; padding:5px; } .father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; } .father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{ float:left; } </style> </head> <body> <div class="father"> <div class="son1">Box-1</div> <div class="son2">Box-2</div> <div class="son3">Box-3</div> <p>這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字，這里是浮動框外圍的文字.</p> </div> </body> </html>
對應效果圖：
標准流中的Box-2的文字在圍繞着Box-1排列，此時Box-1的寬度不再伸展，而是能容納下內容的最小寬度。那么Box-2的盒子寬度范圍如何確定呢？用Firebug可以發現，是與Box-1的左邊框重合，因為此時Box-1已經脫離標准流，標准流中的Box-2會頂到原來Box-1的位置，而文字會圍繞着Box-1排列。
環繞效果
<style type="text/css"> img { float: left; } </style> <img src="http://XXX" /> <p>Some words...</p>
清除浮動
因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div>
有時，並不願意因為要清除浮動而添加額外的div，可以采用如下方法：
1.新的解決方法是在浮動元素的容器上使用 overflow 屬性，如果你設值為hidden 或 auto，也可以解決高度重疊的問題。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>
2.上面這種方法更簡單也更優雅，但是問題是，如果容器元素必須設置為overflow: visible，又該怎么辦呢？方法是首先使用 :before 和 :after 在元素內創建一些不浮動的東西，但實際上我們並不希望出現任何多余的東西，所以一般設置一個空字符串，但是要設置display:block，最后使用老辦法，清除浮動。
使用為元素處理：
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } <div class="news clearfix"> <img src="news-pic.jpg" /> <p>some text</p> </div>
如果需要兼容IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。
浮動使用tips:
1. 浮動元素的活動區域
僅限於它的父容器元素，不會超出父容器
2. 浮動元素的位置
水平方向：盡可能居左或居右，如果它前面還有浮動元素，會跟在它后面，如果超出該行就會換行
垂直方向：盡可能的居頂
關於水平方向的位置，需要注意以下幾點：
1) 向左浮動的元素不會出現在向右浮動的元素的右側
關於垂直方向的位置，需要注意以下幾點：
1) 浮動元素不會比容器的頂部還高
2) 浮動元素不會比前一個塊級元素或浮動元素更高
3) 浮動元素不會比前一個行內元素更高
絕對定位
設置為絕對定位的元素框會脫離文檔流，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。所謂的包含塊就是離其最近的position不為static值的父元素。注意:應用了position: absolute的元素會脫離頁面中的普通流並改變display屬性.
#box2{
position: absolute;
left: 30px;
top: 20px;
}
絕對定位要點：
1.使用絕對定位的盒子以它的“最近”的一個“已定位”（position屬性被設置，並且被設置為不是static的任意一種）的“祖先元素”為基准進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基准進行定位。
2.絕對定位的框從標准流中脫離，這意味着它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。