CSS標(biāo)準(zhǔn)系列解決背景不能延伸的問題_Web標(biāo)準(zhǔn)教程

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　假如我們的網(wǎng)站排版方式是縱向的，比如兩列、三列（當(dāng)然還可以更多）。這樣的排版我們就會(huì)用到 float 例：排成三列的格局。代碼如下：

示例代碼 [www.wf0088.com]

　　這里我們打算把subcol放在左側(cè)，maincol放在中間，xcol放在右側(cè)。CSS的寫法如下：

示例代碼 [www.wf0088.com]

#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;}

　　似乎這樣就沒問題了！但是事實(shí)上我們可以發(fā)現(xiàn)背景卻沒有伸展的意思，這是因?yàn)楸尘暗淖赃m應(yīng)高度并不繼續(xù)float的高度，如何解決這個(gè)問題呢？如下分析：

　　背景會(huì)繼續(xù)float底線所在容器中的位置高度，所以背景一定會(huì)找到最后一個(gè)標(biāo)簽去測定，這樣我們?cè)谒械膄loat下方下如下的標(biāo)簽：

　　<div style="clear:both;"></div>

　　這個(gè)標(biāo)簽中什么也不放。也就是一個(gè)沒有高度的空容器，這樣它就可以把背影拉下來了。

　　事實(shí)上在實(shí)際操作中還是會(huì)有很多問題會(huì)出現(xiàn)，這就需要我們以冷靜的頭腦去分析與解決了！
　　