代碼如下：
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
#header{background-color: gray;}
#content{background-color: red;overflow: auto;}
#sidebar{background-color: blue; float: right;}
#sidebar2{background-color: green;float: left; width: 100px;}
#footer{background-color: yellow;clear: both;}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>這里是標(biāo)題</h1></div>
<div class="box">
<div id="sidebar">
<p>側(cè)邊欄</p>
</div>
<div id="sidebar2">
<p>側(cè)邊欄2：地圖投影，是將地球表面投影到地圖平面的過程，將地理坐標(biāo)轉(zhuǎn)換為平面直角坐
標(biāo)的過程。因?yàn)楫厴I(yè)論文需要，我重新回顧了一下地圖投影的知識并且作了比較全面且簡潔的總
結(jié)。如果你之前未系統(tǒng)了解過地圖投影，又對地圖投影感興趣，這篇博文也許能成為一篇簡潔務(wù)
實(shí)的閱讀材料。</p>
</div>
<div id="content">
<p>這里是一些文字</P>
<p>再來一大段文字</P>
<p>地圖投影，是將地球表面投影到地圖平面的過程，將地理坐標(biāo)轉(zhuǎn)換為平面直角坐標(biāo)的過程。
因?yàn)楫厴I(yè)論文需要，我重新回顧了一下地圖投影的知識并且作了比較全面且簡潔的總結(jié)。如果你
之前未系統(tǒng)了解過地圖投影，又對地圖投影感興趣，這篇博文也許能成為一篇簡潔務(wù)實(shí)的閱讀材
料。</p>
</div>
</div>
<div id="footer"><p>沒人關(guān)注的頁腳</P></div>
</div>
</body>
</html>
這是一個使用浮動實(shí)現(xiàn)三列布局的效果，雖然簡單，卻很實(shí)用
浮動實(shí)現(xiàn)三列布局.png
學(xué)習(xí)筆記來自于 這篇文章
