這篇文章的學習參考了以下鏈結。[link]
其實這個博主就寫得特別好了，但是我覺得自己寫一遍能夠記得牢一些。以後複習也方便檢視就寫一篇博文。
起因：今天做蘑菇街前端筆試題的時候看到了這樣乙個筆試題目。
先寫html把基本的幾個塊結構給搭建起來
>
聖杯布局header
>
maindiv
>
leftdiv
>
rightdiv
>
div>
>
footerfooter
>
header,footer
.main
.left
.right
這樣的效果當然是不可以的，我們想要讓left main right在同一行出現，可以為這三個塊元素開啟浮動。
.main,.left,.right
發現有兩處不隨人意：
(1)開啟浮動後，bd這個div的高度塌陷了。
(2)left main right並不在同一行。
我們先解決(1)高度塌陷問題：
.clear:before, .clear:after
.left
.right
仍然是不盡人意的：
left在main之上，將main的主要內容給擋住了。
這個時候就需要巢狀在最外層的div發揮作用了。為它設定左右各200px的padding。
.bd
最後我們只要為left和right開啟相對定位，設定left和right偏移量就可以讓他們往左右走啦~
完整**如下
>
>
>
聖杯布局title
>
CSS聖杯布局（雙飛翼布局）
我在網上看了有關於css聖杯布局的文章，有很多直接丟 給效果，看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是 像 網那樣，中間先渲染，兩邊後渲染，其次中間的內容是自適應高度的。最好的例子就是 網了。樣式 1.三列布局 2.中間板塊先渲染，自適應高度寬度 3.兩邊定寬 那我們就開...
CSS布局 聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題，要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述，兩種布局解決的問題是一樣的，只是實現方式有些微小的差別 兩者都採用了向左浮動的方式，還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...
CSS 聖杯 雙飛翼布局
html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left，center，right左浮動。清除container浮動，保證後面的div正常布局 left,center,r...