HTML、CSS學習總結二：浮動與定位

　　在總結浮動與定位之前，先引入一個概念，就是HTML中文檔流，文檔流簡單的理解就是HTML中的元素按照代碼的先後順序以從左至右，從上到下的順序排列，一個接一個的排列，也就成為了一個流stream，每個元素都在文檔流中都佔據一定的大小、空間，改變一個元素的布局會直接影響其他元素的布局。

　　而浮動與定位中的絕對位置都會使元素脫離文檔流，什麼意思呢？就是說如果一個元素被設定了浮動或絕對位置屬性，那麼這個元素好像脫離HTML文檔一樣，而其餘的元素重新按照正常的文檔流排列。浮動：浮動會使元素脫離正常的文檔流，浮動的塊狀元素元素是以浮動元素所在行為基準，並且按照不合并 margin的方式來進行浮動的。浮動元素會脫離當前的文檔流，將元素放在父元素內邊距裡側的左邊或者右邊，浮動的定位層在塊狀元素之上，內嵌元素相鄰，自成一新的文檔流，按照從左至右，從上到下的順序排列。 　　定位：元素預設的定位方式是 position:static;當設定了 position:relative; position:fixed;或者 position:absolute;時，我們說元素是被定位了的，其中一個絕對位置( position:absulote;)的元素，是以離它最近的被定為的祖先元素為基準的，絕對位置會使元素脫離文檔流，它的 layout將不會對其他元素的產生影響，而其他的元素重新按照正常的文檔流排列。一個元素，無論是 display:block;還是 inline-block還是 inline，只要設定了絕對位置，那麼它將表現為一個絕對位置元素，絕對位置的定位層在未進行絕對位置的元素之上。可以設定 width、 height，不會展開但是會自動包裹。通過絕對位置可以將元素定位到其他元素的上面或者上面，從而實現首字母下沉、文本替換等效果。　　對於一個元素，通過 display:block | inline; positon:static | absolute;以及設定 尺寸(sized)、 展開(stretched)、 包裹(wrapped)的不同組合，將產生多種不同的設計模式，這也是HTML網頁設計中經常用到的設計模式，總結了一下如下表： (圖片引自博主的新浪部落格)