本文主要講div+css樣式表中的float和clear屬性的用法及幾個小實例。
CSS Float Layout Basics - CSS浮動布局基礎(chǔ)：基于浮動的布局利用了float（浮動）屬性來并排定位元素，并在網(wǎng)頁上創(chuàng)建列?？梢岳眠@個屬性來創(chuàng)建一個環(huán)繞在周圍的效果，例如環(huán)繞在照片周圍，但是當(dāng)你把它應(yīng)用到一個<div>標(biāo)簽上時，浮動就變成了一個強大的網(wǎng)頁布局工具。float屬性把一個網(wǎng)頁元素移動到網(wǎng)頁（或者其他包含塊）的一邊。任何顯示在浮動元素下方的HTML都在網(wǎng)頁中上移，并環(huán)繞在浮動周圍。
float的屬性如下表所示:

left   文本或圖像會移至父元素中的左側(cè)。
right 文本或圖像會移至父元素中的右側(cè)。
none   默認(rèn)。文本或圖像會顯示于它在文檔中出現(xiàn)的位置。

CSS樣式表中 clear:both;可以終結(jié)在出現(xiàn)他之前的浮動 CSS中 clear:both;可以終結(jié)在出現(xiàn)他之前的浮動。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動元素。

clear的四個屬性如下表所示:

left    不允許元素左邊有浮動的元素
right   不允許元素的右邊有浮動的元素
both     元素的兩邊都不允許有浮動的元素
none     允許元素兩邊都有浮動的元素
舉例說明:float與clear的用法.
<style>
.fl{float:left;width:100px;height:25px;background:#cccccc;margin-left:5px; text-align;center; margin-top:5px;}
/* float:left 當(dāng)兩個div都有這個的時候，它們的排列就會并排。當(dāng)?shù)诙€有clear:both它們就換行。*/
.clrb{clear:both}
.clrl{ clear:left;}
.clrr{ clear:right;}
</style>

<div class="fl">1</div>
<div class="fl">2</div>
<div class="clr"></div>
<div class="fl">3</div>
<div class="fl">4</div>
你也是分別替換clear的屬性看一下效果如何.
在這我重點講的是如果把clear的幾種屬性一塊來寫出來會是什么效果呢?來看代碼和效果圖;
<!--clear的值為both時-->
<div class="fl">1</div>
<div class="fl">2</div>
<div class="clrb"></div>
<div class="fl">3</div>
<div class="fl">4</div>

<!--clear的值為left時-->
<div class="fl">1</div>
<div class="fl">2</div>
<div class="clrl"></div>
<div class="fl">3</div>
<div class="fl">4</div>

<!--clear的值為right時-->
<div class="fl">1</div>
<div class="fl">2</div>
<div class="clrr"></div>
<div class="fl">3</div>
<div class="fl">4</div>

解決方法還是要用到div+css樣式表里的 clear屬性.真可謂是成也clear敗也clear
<!--clear的值為both時-->
<div>
<div class="fl">1</div>
<div class="fl">2</div>
<div class="clrb"></div>
<div class="fl">3</div>
<div class="fl">4</div>
</div>
<!--clear的值為left時-->
<div class="clrl">
<div class="fl">1</div>
<div class="fl">2</div>
<div class="clrl"></div>
<div class="fl">3</div>
<div class="fl">4</div>
</div>
<!--clear的值為right時-->
<div class="clrl">
<div class="fl">1</div>
<div class="fl">2</div>
<div class="clrr"></div>
<div class="fl">3</div>
<div class="fl">4</div>
</div>

效果圖如下:

• css
• 布局
• div