1.css float
CSS float 屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框，直到該塊級框的外邊緣碰到包含框或者其他的浮動框為止。
1）元素怎樣浮動
元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環繞在它左邊：
例：img
{
float:right;
}
2）彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對圖片廊使用 float 屬性：
例：.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
3）清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
使用 clear 屬性往文本中添加圖片廊：
例：.text_line
{
clear:both;
}
2.定位
1）Positioning(定位)
CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面，並指定一個元素的內容太大時，應該發生什么。
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非事先設定position屬性。他們也有不同的工作方式，這取決於定位方法.
有四種不同的定位方法。
2）Static 定位
HTML元素的默認值，即沒有定位，元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。
3）Fixed 定位
元素的位置相對於瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
例：p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
4）Relative 定位
相對定位元素的定位是相對其正常位置。
例：h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
可以移動的相對定位元素的內容和相互重疊的元素，它原本所占的空間不會改變。
例：h2.pos_top
{
position:relative;
top:-50px;
}
5）Absolute 定位
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>:
例：h2
{
position:absolute;
left:100px;
top:150px;
}