前言 為了更好理解浮動和position，建議先看看我寫的這篇文章《Html文檔流和文檔對象模型DOM理解》 正文 一、浮動 CSS設計float屬性的主要目的，是為了實現文本繞排圖片的效果。然而，這個屬性居然也成了創建多欄佈局最簡單的方式。 如何浮動一個元素？先設定其寬度width，再增加樣式規則 ...
前言
為了更好理解浮動和position，建議先看看我寫的這篇文章《Html文檔流和文檔對象模型DOM理解》
正文
一、浮動
CSS設計float屬性的主要目的，是為了實現文本繞排圖片的效果。然而，這個屬性居然也成了創建多欄佈局最簡單的方式。
如何浮動一個元素？先設定其寬度width，再增加樣式規則float:left/right。
//註意：該浮動元素已從正常文檔流中刪除。浮動元素是被塊級元素忽略的元素，但是內聯元素知道它們在哪裡，內聯元素會留意浮動元素的邊界，而塊元素會正常流向頁面。
提到浮動，就得提清除浮動clear。如下圖：
因為塊級元素不知道左側浮動元素的存在（浮動元素不在文檔流中），所以塊級元素會鋪滿整個區域。可以用元素的CSS clear屬性來提出請求：當元素流入頁面時，在這個元素的左邊、右邊或兩邊不允許有浮動內容。
添加樣式clear:left; 這樣，塊級元素就會在浮動元素的下麵了。
想瞭解更多浮動的知識，請看例子。《圍住浮動元素的三種方法》
二、position
position屬性有4個值:static、relative、absolute、fixed。
(一)static
HTML元素的預設值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到top, bottom, left, right影響。
(二)relative
相對的是元素原來在文檔流中的位置（或者預設位置）。相對定位會讓元素正常地流入頁面，不過在頁面上顯示之前要進行偏移。
//註意：這個元素原來占據的空間保留著，其他元素沒改變位置。相對定位元素經常被用來作為絕對定位元素的容器塊。
(三)absolute
絕對定位會把元素從文檔流中刪除，塊元素和內聯元素都不知道它的存在，絕對定位的元素的定位上下文是最近的已定位父元素，其預設的定位上下文<body>元素。
//絕對定位元素的任何祖先元素都可以成為它的定位上下文，只要把相應祖先元素的position設定為relative/fixed即可。
(四)fixed
固定定位會把元素從文檔流中刪除，塊元素和內聯元素都不知道它的存在，其定位上下文是視視窗。
ps：relative、absolute、fixed有z-index屬性。
