聖杯布局是一種很常見的css布局。他要求：
1、上部和下部各自占領螢幕所有寬度。
2、上下部之間的部分是乙個三欄布局。
3、三欄布局兩側寬度不變，中間部分自動填充整個區域。
4、中間部分的高度是三欄中最高的區域的高度。
浮動實現
12
3
另外：把中，左，右三個區域設定成度浮動。給左右兩塊區域固定的寬度，中間部分的寬度設定成100%。
這樣實現下來，因為浮動的關係，[middle]會佔據[container]的所有部分，而左右兩塊區域都會被擠到下面，但是，由於第一步設定了內邊距的關係，[container]的左右各剩餘了一塊區域，且寬度與左右區域相同。
(2)移動左側區域
接下來要做的就是把左右兩塊區域挪到空出來的內邊距空間裡去。
先移動左邊，新加乙個樣式 margin-left:-100%。這樣一來，因為浮動關係，就把左邊塊上移到了[middle]左側，與其交織在一起，而右側欄就自動往左移動。然後再給左側欄乙個偏移量，偏移量恰好是其寬度，這一步要給[container]的position設成relative
(3)移動右邊
同上一步的原理一樣，把右側區域也給弄上去，設定負外邊距和本身寬度相同就行了。
布局（浮動）（彈性布局）（聖杯布局）
float浮動 left左浮動，right右浮動，元素浮動之後會脫離原來的文件流，參與浮動文件流，在浮動文件流中塊元素也是橫排布局，寬度也不再是100 cursor pointer 滑鼠樣式 clear both 最基本清除浮動的方法，是在最後乙個元素後邊新增乙個元素，設定這個元素的clear為bo...
聖杯布局 浮動清浮
布局要求1.main模組最先載入 2.main模組寬度佔滿父容器 3.main模組浮動，left right模組居左右 複製 來個例子 先看小例子的最終效果 前為未清除浮動，後為清除浮動 基礎結構聖杯布局 content clearfix main text main left text left ...
實現聖杯布局
聖杯布局特點 左右兩欄都是固定的寬度，中間欄的寬度隨著瀏覽器的變化而變化 在網頁載入過程中先載入中間主體在載入兩邊部分 效果 例項 左邊右邊 疑難點1.不要給container盒子設定寬度 因為他會繼承瀏覽器的寬度，如果設定了盒子寬度100 那麼我們在使用內邊距的時候就會出現滾動條，這個時候可以使用...