CSS 排版不得不知的祕訣（範例一）

市面上很多工具書，css教學的網站只要google一下就有好幾十頁
大多數介紹標籤功能，似乎少了一些排版上需要注意的語法
例如：在排版上最常使用到的就是浮動float
以下是最常見的版型
網頁設計">
我們一般直覺的寫法就是
div 排版
＜div id="Header"＞ Header ＜/div＞
＜div id="Wrapper"＞
＜div id="Left"＞ Left ＜/div＞
＜div id="Right"＞ Right ＜/div＞
＜/div＞
＜div id="Footer"＞ Footer ＜/div＞
CSS 寫法
body{ font-family:Arial, Helvetica, sans-serif;}
#Header {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 36px;
color:#fff;
line-height:100px;
text-align:center;
width:990px;
height:100px;
background-color:#09C;
margin:0 auto; }
#Wrapper{
width:990px; margin:0 auto;

}
#Wrapper #Left{
float:left;
text-align:center;
line-height:500px;
font-size:36px;
color:#fff;
width:250px;
height:500px;
background-color:#333;
}
#Wrapper #Right{
float:right;
font-size:36px;
text-align:center;
color:#333;
line-height:500px;
width:700px;
height:500px;
background-color:#FC9;
}
#Footer{
font-size:36px;
text-align:center;
color:#fff;
width:990px;
height:50px;
background-color:#336;
margin:0 auto;
}

卻發生以下狀況：Footer跑版了
因為float浮動的關係，會影響到下方Footer的標籤


這時候要在Footer的css中加上clear:both
#Footer{
clear:both;
font-size:36px;
text-align:center;
color:#fff;
width:990px;
height:50px;
background-color:#336;
margin:0 auto;
}


看似簡單的語法，卻是大多數人所不知道的訣竅
甚至不斷的在所有css語法中加上一堆自認為有可能解救的方式卻徒勞無功
透過上課進修與同仁之間的經驗分享
讓工作事半功倍，初學者能得心應手