為何尋找布局的聖杯
優良的布局可以使網頁的組織更合理，適應力更加健壯，最重要的是實現內容層與表現層的分離，實現前端開發的漸進增強以及**的內容優先。這就是前端程式設計師追尋聖杯布局的原因。
1 relative & absolute
相對定位和絕對定位本質上講已經脫離了文件的正常流，只是相對定位依舊保留原先存在於文件流的空間，也就意味著依舊會影響著文件流的布局，而絕對定位刪除了在文件流的空間，脫離文件流並覆蓋在其上，頑固如狗皮膏藥。正常文件流中的元素改變z軸座標也無濟於事。絕對定位總的來講，共有4個特性，一是刪除了原先在文件流中的位置，二是覆蓋在正常文件流之上，三是定位的基點（即(0,0)）預設是包含塊，當其父元素的定位也不是預設值時，基點則在父元素，否則繼續往上查，一直查到初始包含塊body為止，而若是沒有給left，top賦值，則預設為原先在文件流中的值，四是定義以後元素預設為塊級框。相對定位的話，就簡單多了，是相對於原先位置的偏移。一下是絕對定位在布局中的實現，它有其缺點，當邊欄的高度未知時，為覆蓋footer。
我們還可以通過絕對定位，使頁面的主要內容放在body的最前面，進一步實現內容至上的布局。
2 float & clear
設定浮動的元素，會進入浮動流，它們也已脫離了原先的文件流。浮動是相對于父元素的，在其後的元素會進入它們原先的位置空間，從而很大可能被浮動的元素遮蓋而不可見。而我們很多時候並不想讓div頂上浮動的div們原先的為止，因此就有了清除浮動clear。
css1和css2中並沒有這個屬性，那時我們是用margin處理的，而css2.1出現了clear,它的作用就是騰出乙個清除空間，若是左邊有div浮動則在上部多出乙個清楚空間，以達到之前margin-top想要的效果。
3 margin : -100%
負邊距可以改變文件流和浮動流中的布局，使排在後面的元素可以排在前，由此可以讓html的結構可以更加合理化。它使主要內容div可以排在最前面。而左右邊欄可以放在後面。如下
這是負邊距布局的簡單示例，負邊距布局在思路上讓人們看見了內容層與表現層解耦的曙光。但是在ie老版本瀏覽器中相容真的不好，試了一下display:inline以後也會有諸如閃爍或是在視窗寬度在某一值時extra排到下面的情況，不知道是不是電腦瀏覽器問題。
這是兩個非常好用的屬性，min-width使百分比布局不會崩潰，比如width:100%。而max-width可以使頁面的寬度不會因為無限擴大而變得雜亂。相容性是個問題，ie瀏覽器7+才相容。它們的值除了繼承，有數值和百分比兩種形式。
min-width示例：第一種布局將三個div都放進乙個div#main中，父元素沒有簡單的width:100%，就會出現
這在很多**中是無法忍受的，而給父元素定了min-width以後
5.雙飛翼布局
雙飛翼布局是在綜合負邊距，浮動，定位之後產生的一種相容性強，變化快捷（三字段置的變換），滿足內容優先原則的優秀布局
參考文章：
參考**：w3c
css中div的布局
在靜態網頁的編寫中基本上都對布局的應用。概念問題說著容易，在實際操作的情況中網頁比較複雜，考慮的問題應該比較全面。可以先畫乙個框架圖，對各個板塊的長寬踐行計算再寫起來會更容易些。1.對div的位置和大小進行布局 我們可以將其假想為乙個矩形格式的模型，矩形模型如下圖所示 矩形模型主要包括三大屬性，正如...
css中的Sticky footer 布局
什麼叫sticky footer 布局呢？我們所見到的大部分 頁面，都會把乙個頁面分為頭部區塊 內容區塊和頁尾區塊，當頭部區塊和內容區塊內容較少時，頁尾能固定在螢幕的底部，而非隨著文件流排布。當頁面內容較多時，頁尾能隨著文件流自動撐開，顯示在頁面的最底部，這就是sticky footer布局。一般網...
CSS布局中的問題
1.高度自適應的問題 1.乙個元素是否可以使用百分比顯示，取決於它的父級元素，所以如果需要給此元素設定100 那麼需要先給父元素設定高100 2.一級元素的父元素是body，所以如果我們想讓高度100 的話，那就給body設定高100 但是又因為body的父元素是html，所以我們同時也要給html...