html5 css3的神奇搭配

浮動的元素會脫離標準文件流（float）,從而不佔據空間，實現了一行排列多個元素的效果，但是又導致上級元素height消失，處理這種情況的方法就是有兩種：

1.第一種在css裡寫個偽類，哪些地方需要清除浮動，直接呼叫類名。

.clearfix::after

.clearfix

2.第二種情況就是溢位隱藏。

overflow:hidden;

zoom:1;

1.靜態定位：是元素的預設定位方式，不能使用top，bottom，left，right和z-index屬性。

2.相對定位：就是相對於當前的位置進行的left,top,right,bottom。

3.絕對定位：脫離文件流，不佔據空間，用position:absolute;這條語句。進行left,right,top,bottom進行相對於具有定位屬性得父級元素進行定位，如果未找到就會依次向上尋找，直到找到body停止相對於瀏覽器視窗進行絕對定位。

4.固定定位：設定position:fixed;，直接以瀏覽器視窗作為參考進行定位，它是浮動在頁面中，元素位置不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。

1.總體來說css3的響應式滿足了所有解析度的需求，@media**查詢進行主流解析度的響應式調節。

2.切記**中不可寫固定高度！