CSS標準系列解決背景不能延伸的問題_Web標準教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
假如我們的網站排版方式是縱向的，比如兩列、三列（當然還可以更多）。這樣的排版我們就會用到 float 例：排成三列的格局。代碼如下：
示例代碼 [www.zhaotila.cn]
<div ="content">
<div id="main">
<div id="maincol"></div>
<div id="xcol"></div>
</div>
<div id="subcol"></div>
</div>
<div id="main">
<div id="maincol"></div>
<div id="xcol"></div>
</div>
<div id="subcol"></div>
</div>
這里我們打算把subcol放在左側，maincol放在中間，xcol放在右側。CSS的寫法如下：
示例代碼 [www.zhaotila.cn]
#content{width:700px; background:url(img/bg.png)repeat-y;}
#subcol {float:left; width:200px;}
#main {width:500px; float:right;}
#maincol {width:300px;float:left;}
#xcol {width:200px; float:right;}
#subcol {float:left; width:200px;}
#main {width:500px; float:right;}
#maincol {width:300px;float:left;}
#xcol {width:200px; float:right;}
似乎這樣就沒問題了！但是事實上我們可以發現背景卻沒有伸展的意思，這是因為背景的自適應高度并不繼續float的高度，如何解決這個問題呢？如下分析：
背景會繼續float底線所在容器中的位置高度，所以背景一定會找到最后一個標簽去測定，這樣我們在所有的float下方下如下的標簽：
<div style="clear:both;"></div>
這個標簽中什么也不放。也就是一個沒有高度的空容器，這樣它就可以把背影拉下來了。
事實上在實際操作中還是會有很多問題會出現，這就需要我們以冷靜的頭腦去分析與解決了！
相關Web標準教程：
- 相關鏈接：
- 教程說明：
Web標準教程-CSS標準系列解決背景不能延伸的問題
。