本文主要講
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的屬性有什麼高見的話請留言，會及時學習與改正！
參考閱讀:div+css文章專欄
