div+css佈局之float與clear的用法

CSS Float Layout Basics - CSS浮動佈局基礎：基於浮動的佈局利用了float（浮動）屬性來並排定位元素，並在網頁上建立列。能夠利用這個屬性來建立一個環繞在周圍的效果，例如環繞在照片周圍，可是當你把它應用到一個<div>標籤上時，浮動就變成了一個強大的網頁佈局工具。float屬性把一個 網頁元素移動到網頁（或者其餘包含塊）的一邊。任何顯示在浮動元素下方的HTML都在網頁中上移，並環繞在浮動周圍。

float的屬性以下表所示:

 

left    文本或圖像會移至父元素中的左側。

right 文本或圖像會移至父元素中的右側。

none    默認。文本或圖像會顯示於它在文檔中出現的位置。

 

CSS樣式表中 clear:both;能夠終結在出現他以前的浮動 CSS中 clear:both;能夠終結在出現他以前的浮動。使用clear屬性能夠讓元素邊上不出現其它浮動元素。

 

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 當兩個div都有這個的時候，它們的排列就會並排。當第二個有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>

效果圖以下:

 

對於 div+css樣式表中的float和clear的css的屬性有什麼高見的話請留言，會及時學習與改正！