CSS Float布局過(guò)程與老生常談的三欄布局

發(fā)布時(shí)間：2013-07-22 11:48:30 作者：佚名

這篇文章就是總結(jié)一下怎樣使用CSS中的float屬性進(jìn)行布局，其實(shí)網(wǎng)上有很多討論這個(gè)話題的文章了，但我覺(jué)得都沒(méi)說(shuō)到點(diǎn)子上。那就來(lái)老生常談一次吧，CSS之Float布局

使用CSS布局網(wǎng)頁(yè)，那是前端的基本功了，什么兩欄布局，三欄布局，那也是前端面試的基本題了。一般來(lái)說(shuō)，可以使用CSSposition屬性進(jìn)行布局，或者使用CSSfloat屬性布局。前者適合布局首頁(yè)，因?yàn)槭醉?yè)上的內(nèi)容往往可以完全控制。后者適合布局模板，模板中填充的內(nèi)容你沒(méi)法控制——比如，在編輯wordpress模板時(shí)，你肯定沒(méi)法考慮每篇博文的長(zhǎng)度。這篇博文，就是總結(jié)一下怎樣使用CSS中的float屬性進(jìn)行布局，其實(shí)網(wǎng)上有很多討論這個(gè)話題的文章了，但我覺(jué)得都沒(méi)說(shuō)到點(diǎn)子上。那就來(lái)老生常談一次吧，CSS之Float布局。

DIV的特點(diǎn)

布局的基本HTML元素div，有這么幾個(gè)特點(diǎn)，會(huì)影響到后面進(jìn)行的布局。注意，下面的特點(diǎn)僅適用于沒(méi)有指定width屬性和height屬性的div，因?yàn)樵谟胒loat進(jìn)行布局的過(guò)程中，我們只有在特定的位置（后面會(huì)詳述）才這么做。

•空的div是沒(méi)有高度的。
•有內(nèi)容的div其高度取決于內(nèi)容的高度。
•如果沒(méi)有指定float屬性，div的寬度將和占滿父元素的寬度（不管是不是空的）。
•如果指定了float屬性，div的寬度將取決于內(nèi)部元素的寬度（所以，空的div指定了float屬性后既沒(méi)有高度也沒(méi)有寬度）。
網(wǎng)上的很多教程，經(jīng)常指定了div的寬度或高度，然后講解float屬性，這對(duì)我學(xué)習(xí)布局確實(shí)產(chǎn)生了很大干擾。記住，只有在特定的位置，我們才會(huì)指定div的寬度。

Float布局的過(guò)程

在實(shí)踐過(guò)程中，我領(lǐng)悟到一點(diǎn)，那就是，div是按照在HTML文檔中的順序進(jìn)行渲染的。也就是說(shuō)，我們先決定前一個(gè)div在頁(yè)面上的位置，然后再?zèng)Q定后一個(gè)div的位置。也許這一點(diǎn)是顯而易見(jiàn)的，但它確實(shí)是理解Float布局的關(guān)鍵，網(wǎng)上其他教程里很少有提及。

有下面這樣的HTML文檔

復(fù)制代碼

代碼如下:

<!DOCTYPE>
<html>
<head>
<style type="text/css">
#header{background-color: gray;}
#content{background-color: red;}
#sidebar{background-color: blue;}
#sidebar2{background-color: green;}
#footer{background-color: yellow;}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>這里是標(biāo)題</h1></div>
<div id="sidebar">
<p>側(cè)邊欄</p>
</div>
<div id="sidebar2">
<p>側(cè)邊欄2：地圖投影，是將地球表面投影到地圖平面的過(guò)程，將地理坐標(biāo)轉(zhuǎn)換為平面直角坐
標(biāo)的過(guò)程。因?yàn)楫厴I(yè)論文需要，我重新回顧了一下地圖投影的知識(shí)并且作了比較全面且簡(jiǎn)潔的總
結(jié)。如果你之前未系統(tǒng)了解過(guò)地圖投影，又對(duì)地圖投影感興趣，這篇博文也許能成為一篇簡(jiǎn)潔務(wù)
實(shí)的閱讀材料。</p>
</div>
<div id="content">
<p>這里是一些文字</P>
<p>再來(lái)一大段文字</P>
<p>地圖投影，是將地球表面投影到地圖平面的過(guò)程，將地理坐標(biāo)轉(zhuǎn)換為平面直角坐標(biāo)的過(guò)程。
因?yàn)楫厴I(yè)論文需要，我重新回顧了一下地圖投影的知識(shí)并且作了比較全面且簡(jiǎn)潔的總結(jié)。如果你
之前未系統(tǒng)了解過(guò)地圖投影，又對(duì)地圖投影感興趣，這篇博文也許能成為一篇簡(jiǎn)潔務(wù)實(shí)的閱讀材
料。</p>
</div>
<div id="footer"><p>沒(méi)人關(guān)注的頁(yè)腳</P></div>
</div>
</body>
</html>

一共5個(gè)div，為了使這些div具有高度和寬度，向其中添加了一些文字?，F(xiàn)在還沒(méi)有任何float屬性，所以每個(gè)div都占滿了整個(gè)父元素的寬度，而高度由其中的內(nèi)容決定。渲染效果如下：

當(dāng)一個(gè)元素具有float屬性時(shí)，瀏覽器會(huì)怎樣做？我想是這樣的：

1.渲瀏覽器探測(cè)到這個(gè)元素具有float:right屬性，
2.根據(jù)其內(nèi)容限制了div的寬度（而不是盡量占滿父元素寬度）
3.脫離文檔流，并選擇這樣的位置進(jìn)行渲染：
1.首先要在文檔流沒(méi)有占領(lǐng)的區(qū)域，否則就有可能覆蓋已經(jīng)渲染的文檔。
2.其次，也沒(méi)有其他float元素。
3.最后，渲染之后不會(huì)影響文檔流。文檔流該怎么走還怎么走，但是文檔中的內(nèi)容會(huì)自動(dòng)繞開(kāi)float元素。
試著將div#sidebar設(shè)置float:left屬性：

復(fù)制代碼

代碼如下:

#sidebar{
float: right;
}

側(cè)邊欄沒(méi)有浮動(dòng)到標(biāo)題欄上，即使標(biāo)題欄右側(cè)沒(méi)有文字。這是因?yàn)闃?biāo)題欄的渲染在側(cè)邊欄之前進(jìn)行，瀏覽器渲染完標(biāo)題欄后已經(jīng)忘了標(biāo)題欄右側(cè)有沒(méi)有內(nèi)容了，所以不能冒著覆蓋原來(lái)的內(nèi)容的風(fēng)險(xiǎn)將側(cè)邊欄浮動(dòng)到標(biāo)題欄上。接著，文檔流該怎么渲染還是怎么渲染，除了其中文字繞開(kāi)浮動(dòng)元素，就好像浮動(dòng)元素不存在一樣。

我們希望側(cè)邊欄2在頁(yè)面左側(cè)，側(cè)邊欄1在頁(yè)面右側(cè)。因?yàn)閭?cè)邊欄2中內(nèi)容很多，所以需要限定寬度。為了美觀，同時(shí)限定1的寬度，并對(duì)側(cè)邊欄2賦float屬性。

復(fù)制代碼

代碼如下:

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 180px;
}

有點(diǎn)像一個(gè)三欄布局的樣子了。但我們通常不希望中欄高于側(cè)邊欄時(shí)，延伸到側(cè)邊欄下方。這時(shí)通常使用的技巧就是給中欄帶margin屬性，左右的值就是兩個(gè)側(cè)邊欄的值。

復(fù)制代碼

代碼如下:

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 160px;
}
#content{
margin-left: 160px;
margin-right: 100px;
}

很好，一個(gè)三欄布局就完成了。雖然看上去很好，但是如果中欄的高度小于側(cè)邊欄會(huì)怎樣？把中欄里的內(nèi)容都刪掉大部分，然后：

見(jiàn)鬼，頁(yè)腳上去了……這可不是我希望的。那么還有一個(gè)技巧，就是在頁(yè)腳使用clear屬性。這個(gè)屬性的作用就是，使文檔流中元素在布局的時(shí)候，不允許左側(cè)或右側(cè)出現(xiàn)浮動(dòng)元素。如果有，則在浮動(dòng)元素的下方進(jìn)行渲染。這里，為頁(yè)腳添加clear屬性。

復(fù)制代碼

代碼如下:

#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 160px;
}
#content{
margin-left: 160px;
margin-right: 100px;
}
#footer{
clear: both;
}

頁(yè)腳也正常了，這樣，一個(gè)三欄布局就最終完成了。

最后，再來(lái)看一個(gè)例子吧，這個(gè)例子將解釋兩個(gè)問(wèn)題：

1.當(dāng)可渲染區(qū)域去除掉已有的浮動(dòng)元素，剩下的那一塊區(qū)域，其頂部不足以容納浮動(dòng)元素時(shí)，浮動(dòng)元素將放棄渲染在頂部，而渲染在前面那個(gè)浮動(dòng)元素的下方。
2.在以上的情況下，兩個(gè)浮動(dòng)元素仍然不在文檔流中，可能會(huì)產(chǎn)生一些詭異的現(xiàn)象。
恢復(fù)中欄的內(nèi)容，并改寫(xiě)CSS代碼如下：

復(fù)制代碼

代碼如下:

#sidebar{
float: right;
width: 200px;
}
#sidebar2{
float: left;
width: 300px;
}

這張圖就清晰地說(shuō)明了浮動(dòng)元素其實(shí)是不在文檔流之中的。首先，瀏覽器頁(yè)面沒(méi)有500像素寬，所以側(cè)邊欄2沒(méi)法在頂部渲染（側(cè)邊欄1的存在使空間不夠了），這時(shí)文檔流僅僅進(jìn)行到標(biāo)題欄。因此中欄從標(biāo)題欄下方開(kāi)始渲染，為了繞開(kāi)兩個(gè)側(cè)邊欄，只好先在左上角寫(xiě)幾個(gè)字，然后到側(cè)邊欄2右側(cè)憋屈地渲染，最后才正常地舒展開(kāi)（你可以這樣想象，綠色和藍(lán)色的后面，其實(shí)是沒(méi)有文字的紅色）。

作者：一葉齋主人
出處：www.cnblogs.com/yiyezhai