浮動清除與定位

浮動，意思就是把元素從常規文檔流中拿出來。拿出來幹什麼？

一是能夠實現傳統出版物上那種文字繞排圖片的效果，

二是可讓原來上下堆疊的塊級元素，變成左右並列，從而實現佈局中的分欄，

浮動元素脫離了常規文檔流以後，原來緊跟其後的元素就會在空間容許的狀況下，向上提高到與浮動元素分庭抗禮。用clear 屬性來清除浮動。

 

浮動元素脫離了文檔流，其父元素也看不到它了，於是也不會包圍它。要想父元素包圍它，有3中方法

爲父元素添加overflow:hidden

實際上，overflow:hidden 聲明的真正用途是防止包含元素被超大內容撐大。應用overflow:hidden 以後，包含元素依然保持其設定的寬度，而超大的子內容則會被容器剪切掉。除此以外，overflow:hidden 還有另外一個做用，即它能可靠地迫使父元素包含其浮動的子元素

不能在下拉菜單的頂級元素上應用overflow:hidden，不然做爲其子元素的下拉菜單就不會顯示了

讓父元素浮動起來

不能對已經靠自動外邊距居中的元素使用「浮動父元素」技術，不然它就不會再居中

添加非浮動的清除元素

給父元素的最後添加一個非浮動的子元素，而後清除該子元素。因爲包含元素必定會包圍非浮動的子元素，並且清除會讓這個子元素位於（清除一側）浮動元素的下方，所以包含元素必定會包含這個子元素——以及前面的浮動元素。在包含元素最後添加子元素做爲清除元素的方式有兩種

a. 簡單地在HTML 標記中添加一個子元素, 並給它應用clear 屬性。因爲沒有默認的樣式，不會引入多餘空間，div 元素很適合這個目的

b. 若是你特別不想添加這個純表現性元素，我再告訴你一個用CSS 來添加這個清除元素的方法

.clearfix:after {
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
 /*規則中的其餘聲明是爲了確保這個僞元素沒有高度，並且在頁面上不可見*/

}

相對定位

相對的是它原來在文檔流中的位置（或者默認位置）能夠使用top、right、bottom 和left 屬性來改變它的位置了。但多數狀況下，只用top 和left 就能夠實現

咱們想要的效果。如下CSS 規則

p#specialpara {position:relative; top:25px; left:30px;}

要注意，除了這個元素本身相對於原始位置挪動了一下以外，頁面沒有發生任何變化。換句話說，這個元素原來佔據的空間沒有動，其餘元素也沒動

絕對定位

絕對定位跟靜態定位和相對定位比，絕對不同。由於絕對定位會把元素完全從文檔流中拿出來

絕對定位元素默認的定位上下文是body 元素，而不是相對於它在文檔流中的位置偏移多遠，—這一點與相對定位的元素不一樣。

絕對定位元素的任何祖先元素均可以成爲它的定位上下文，只要你把相應祖先元素的position 設定爲relative 便可

固定定位

從徹底移出文檔流的角度說，固定定位與絕對定位相似, 但不一樣之處在於，固定定位元素的定位上下文是視口（瀏覽器窗口或手持設備的屏幕），所以它不會隨頁面滾動而移動

若須要作彈出層，footer時，須要使用固定定位，不然頁面滾動時效果會有問題