以三欄等高布局為例：
第一欄寬度30%,第二欄寬度40%,第三欄寬度30%
幾欄就寫幾個容器，這裡需要3個容器，分別是爺爺爸爸和兒子，寬度是100%
使用相對定位把爸爸向左側移動30%，漏出爺爺的30%
使用相對定位把兒子向左側移動40%，漏出爸爸的40%
在兒子裡面寫左中右三欄，給這三欄設定浮動，讓他們在同一行顯示
使用相對定位，把第三欄定位到和爺爺漏出的部分重疊到一起
使用相對定位，把第二欄定位到和爸爸漏出的部分重疊到一起
使用相對定位，把第一欄定位到和兒子漏出的部分重疊到一起
由於左中右三欄浮動，所以兒子的高度為0，需要清除浮動，可以使用float：left，然後給爸爸也設定float：left清除浮動，給爺爺設定overflow：hidden清除浮動
三欄等高，兒子爸爸爺爺是等高的
body**:
<
!--
三欄等高布局
第一欄 寬度30
% 第二欄 寬度40
% 第三欄 寬度30%--
>
="grandpa"
>
="father"
>
="son"
>
="left"
>左左左左左左左左左左左左左左左左左左左左<
/div>
="center"
>中中中中中中中中中中中中中中中中中中中<
/div>
="right"
>右<
/div>
<
/div>
<
/div>
<
/div>
<
/body>
*//清除頁面預設樣式
.grandpa
.father
.son
.left
.center
.right
<
/style>
以三欄等高布局為例
給三欄設定同樣的padding-bottom:9999px
給三欄設定同樣的margin-bottom：-9999px
給三欄的父元素設定overflow：hidden(清除浮動，溢位隱藏)
body**:
="bigbox"
>
="box"
>
="left"
>左左左左左左左左左左左左左左左左左左左
<
/div>
="center"
>中<
/div>
="right"
>右右右右右右右右右右右右右右右<
/div>
<
/div>
<
/div>
<
/body>
.bigbox
.box
.left
.center
.right
<
/style>
以三欄等高布局為例 , 第一欄寬度300px,第二欄寬度400px,第三欄寬度300px
設定乙個盒子，寬度是第二欄的寬度400px
給這個盒子設定左邊框是第一欄的寬度300px
給這個盒子設定右邊框是第三欄的寬度300px
在這個盒子裡設定三欄，注意順序：中-左-右
給這三欄設定浮動
利用margin的負值，把左側一欄移動到和盒子的左邊框重疊的位置
利用margin的負值，把右側一欄拽到第一行的位置
再利用相對定位，把右側一欄定位到和右邊框重疊的位置
等高看的是盒子的高度和左右邊框的高度
body**:
="box cleafix"
>
="center"
>中中中中中中中中中中<
/div>
="left"
>左左左左左左左左<
/div>
="right"
>右<
/div>
<
/div>
<
/body>
.cleafix:after
//清除浮動
.box
.center
.left
.right
<
/style>
左右兩側寬度固定
中間一欄寬度自適應
以左側寬度300px，右側寬度是200px為例
寫結構，注意順序：中——左——右
中間一欄寬度設定成100%；
給左中右三欄設定浮動
給左側一欄加margin-left：-100%，讓左側盒子移動到第一行的最左邊的位置
給右側盒子設定margin-left：-200px(右側盒子的寬度)，讓右側盒子移動到第一行的最右邊的位置
給他們的父元素設定左右兩邊的padding值：padding：0 200px 0 300px; 讓所有子元素向中間移動
使用相對定位把左右兩側的盒子定位到空白區域
給父元素設定最小寬度
body**:
="center"
>
<
/div>
="left"
>
<
/div>
="right"
>
<
/div>
<
/body>
body
.center
.left
.right
<
/style>
前五條同聖杯布局一樣
6. 在中間一欄裡在加乙個盒子，給這個盒子設定左右兩側margin或者padding，讓內容往中間擠
7. 給大盒子設定清除浮動和最小寬度
body**:
="box"
>
="center"
>
="cenmain"
>中<
/div>
<
/div>
="left"
>
<
/div>
="right"
>
<
/div>
<
/div>
*.center
.left
.right
.cenmain
.box
<
/style>
css聖杯布局 等高布局
所謂聖杯布局，就是自適應瀏覽器的解析度，也稱雙飛翼布局。例子 1 style 2body 3.center 4.left 5.right 6style 7head 8 body 9 div class center 2 div 10 div class left 1 div 11 div class...
HTML CSS 經典布局
html div class i box clearfix div class layout l clearfix div class i left p 左側定寬 p div div class i right p 右側自適應 p div div div div class i box clearf...
CSS經典布局 聖杯布局
廢話不多說，先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局，header footer container 給 container 乙個預設的padding le...