DIV+CSS布局：CSS浮動float屬性詳解.doc

DIV CSS布局：CSS浮動float屬性詳解在傳統(tǒng)的表格布局中，我們對表格應(yīng)該對齊方式對實現(xiàn)了對布局的應(yīng)用，而應(yīng)用Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)頁以后，float浮動屬性是布局中非常重要的屬性，我們常常通過對div元素應(yīng)用float浮動來進(jìn)行布局，不但對整個版式進(jìn)行規(guī)劃，也可以對一些基本元素如導(dǎo)航等進(jìn)行排列。我們來看看float屬性基本釋義：該屬性的值指出了對象是否及如何浮動。當(dāng)該屬性不等于none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等于block。也就是說，浮動對象的display特性將被忽略。float屬性的參數(shù)： none：對象不浮動left：對象浮在左邊right：對象浮在右邊下面我們通過一些測試來了解可能出現(xiàn)的一些情況，如果float取值為none則不會發(fā)生任何浮動，塊元素獨占一行，緊隨其后的塊元素將在新行中顯示，如下圖：我們看下面的運行效果：Source Code to Run 52CSS #content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:200px; height:80px;border:1px solid #000; margin:10px; background:#999; 52CSS.com這是第一個DIV 52CSS.com這是第二個DIV 可先修改部分代碼 再運行查看效果 我們對content_a應(yīng)用向左的浮動。而content_b不應(yīng)用任何浮動。Source Code to Run 52CSS #content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; border:1px solid #000; margin:10px; background:#999; 52CSS.com 這是第一個DIV 向左浮動 52CSS.com 這是第二個DIV 不應(yīng)用浮動 可先修改部分代碼 再運行查看效果 我們看在IE6中的效果：我們看在FF中的效果：在IE中，對content_a應(yīng)用向左的浮動后，content_a向左浮動，content_b在水平方向僅跟著它的后面。在FF中，對content_a應(yīng)用向左的浮動后，content_b在水平方向容器不可見，只留下了文字。這是由于未清除浮動所造成的現(xiàn)象，關(guān)于清除浮動，可以參考這里：/article.asp?id=132 （overflow:auto;）這就是IE與FF對此種情況的不同解決，我們在實際布局中，應(yīng)該避免這樣的情況發(fā)生。我們同時對這兩個容器應(yīng)用向左的浮動看看發(fā)生的現(xiàn)象。Source Code to Run 52CSS #content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; float:left; border:1px solid #000; margin:10px;background:#999; 52CSS.com 這是第一個DIV 向左浮動 52CSS.com 這是第二個DIV 向左浮動 可先修改部分代碼 再運行查看效果 在IE中的效果如圖：在FF中的效果如圖：在IE與FF中，他們的效果基本取得了一致。在布局中，我們可應(yīng)用這類IE與FF兼容的方法。我們對content_b應(yīng)用向左的浮動。而content_a不應(yīng)用任何浮動?？纯词呛涡Ч篠ource Code to Run 52CSS #content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:200px; height:80px;float:left; border:1px solid #000; margin:10px; background:#999; 52CSS.com 這是第一個DIV 不應(yīng)用浮動 52CSS.com 這是第二個DIV 向左浮動 可先修改部分代碼 再運行查看效果 在IE中的效果如圖：在FF中的效果如圖：在IE與FF中均未有太大的變化。在IE中，應(yīng)用浮動后的content_b卻造成了一個雙邊距的BUY。汗一個先。關(guān)于IE的雙邊距BUY請參考這里：/article.asp?id=144向左浮動會出現(xiàn)何種狀態(tài)呢？在向右浮動后，最大的變化就是在HTML中，前面的元素在最右邊，后面的元素跑到了最左邊。我們對上面代碼中的兩個元素同時應(yīng)用向右的浮動看看效果。Source Code to Run 52CSS #content_a width:200px; height:80px; float:right; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; float:right; border:1px solid #000; margin:10px;background:#999; 52CSS.com 這是第一個DIV 向右浮動 52CSS.com 這是第二個DIV 向右浮動 可先修改部分代碼 再運行