基于 Float 的布局是一種非常容易使用的布局模式。

Float 屬性指元素自動填充頁面的空間， Float 可以向左浮動，也可以向右浮動。基于 Float 的布局（也稱浮動布局）就是根據(jù)這個屬性的特性來定義元素的布局。現(xiàn)在一般網(wǎng)站都會采用兩列布局和三列布局。如下圖

?

?

圖 1 兩列布局

?

圖 2 三列布局

?

1 ????????? 兩列 Float 布局

<div id="swapdiv"> 布局頭 </div>

<div id="leftNav">

……..

</div>

<div id="content">

……..

</div>

<div id="footer"> 頁面尾部 </div>

?

這個設計，把整個頁面分成四塊，上面的布局頭，下面的布局尾。主要的內(nèi)容分成兩列。 leftNav 為導航模塊，放在頁面的左邊， content 為內(nèi)容模塊放在頁面的右邊，都采用 Float 的布局向左浮動。

?

下面是布局的 CSS 代碼：

?

#swapdiv{

????? background:#00CCFF;

????? width:700px;

float:left;

}

?

#leftNav{

????? background:#00CCFF;

????? width:100px;

????? float:left;

}

?

#content{

????? background:#00CCFF;

????? width:600px;

????? float:left;

}

?

#footer{

????? background:#00CCFF;

????? width:700px;

????? float:left;

}

這種布局要注意的地方是內(nèi)容注意不能過長。 Div 如果出現(xiàn)內(nèi)容過長的情況下，在 IE 里面的表現(xiàn)是 Div 會自動拉長來適應頁面的寬度，這樣就會導致， Div 被浮動到下一行去。破壞了整個頁面的布局。 ?

上面的例子用像素作為 Div 的寬度，也我們也可以用百分比來設計 div 的寬度。

比如：

#swapdiv{

????? background:#00CCFF;

????? width:80%;

????? float:left;

}

?

#leftNav{

????? background:#00CCFF;

?????? ?????? width:20%;

?????? ?????? float:left;

}

?

#content{

????? background:#00CCFF;

????? width:80%;

????? float:left;

}

?

#footer{

????? background:#00CCFF;

????? width:80%;

????? float:left;

}

采用了像素作為寬度的單位，這個形式叫固定布局，有時稱為冰布局。而用百分比作為布局寬度的形式叫流體布局。一般以像素用為單位的話，容易把握布局的位置，但是縮小瀏覽器后，則會出現(xiàn)水平滾動條。而且對于一個瀏覽器的空間利用不充分。使用流體布局的話，縮小瀏覽器時，頁面會自動調整寬度，因此不會出現(xiàn)水平的滾動條，但是因為不同的機器顯示器的分辨率不同，在不同的分辨率下，效果會不同，所以不容易把握布局。

?

有時候，字體的大小對于頁面的布局也會形成一定的影響。因此還有一種布局，根據(jù)字號來調整元素的寬度

基于Float的布局