在傳統的**布局中，我們對**應該對齊方式對實現了對布局的應用，而應用web標準構建網頁以後，float浮動屬性是布局中非 常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。
我們來看看float屬性基本釋義：
該屬性的值指出了物件是否及如何浮動。當該屬性不等於none引起物件浮動時，物件將被視作塊物件(block-level)，即display屬性等於 block。也就是說，浮動物件的display特性將被忽略。
float屬性的引數：
none：物件不浮動
left：物件浮在左邊
right：物件浮在右邊
下面我們通過一些測試來了解可能出現的一些情況，如果float取值為none則不會發生任何浮動，塊元素獨佔一行，緊隨其後的塊元素將在新行中顯示，如 下圖：
我們看下面的執行效果：
[www.52css.com]
52css.com這是第乙個div
52css.com這是第二個div
[ 可先修改部分** 再執行檢視效果 ]
我們對content_a應用向左的浮動。而content_b不應用任何浮動。
[www.52css.com]
52css.com 這是第乙個div 向左浮動
52css.com 這是第二個div 不應用浮動
[ 可先修改部分** 再執行檢視效果 ]
我們看在ie6中的效果：
我們看在ff中的效果：
在ie中，對content_a應用向左的浮動後，content_a向左浮動，content_b在水平方向僅跟著它的後面。
在ff中，對content_a應用向左的浮動後，content_b在水平方向容器不可見，只留下了文字。這是由於未清除浮動所造成的現象，關於清除浮 動，可以參考這裡： （overflow:auto;）這就是ie與ff對此種情況的不同解決，我們在實際布局中，應該避免這樣的情況發生。
我 們同時對這兩個容器應用向左的浮動看看發生的現象。
[www.52css.com]
52css.com 這是第乙個div 向左浮動
52css.com 這是第二個div 向左浮動
[ 可先修改部分** 再執行檢視效果 ]
在ie中的效果如圖：
在ff中的效果如圖：
在ie與ff中，他們的效果基本取得了一致。在布局中，我們可應用這類ie與ff相容的方法。
我們對content_b應用向左的浮動。而content_a不應用任何浮動。看看是何效果：
[www.52css.com]
52css.com 這是第乙個div 不應用浮動
52css.com 這是第二個div 向左浮動
[ 可先修改部分** 再執行檢視效果 ]
在ie中的效果如圖：
在ff中的效果如圖：
在ie與ff中均未有太大的變化。在ie中，應用浮動後的content_b卻造成了乙個雙邊距的buy。汗乙個先。關於ie的雙邊距buy請參考這裡：
向左浮動會出現何種狀態呢？在向右浮動後，最大的變化就是在html中，前面的元素在最右邊，後面的元素跑到了最左邊。
我 們對上面**中的兩個元素同時應用向右的浮動看看效果。
[www.52css.com]
52css.com 這是第乙個div 向右浮動
52css.com 這是第二個div 向右浮動
[ 可先修改部分** 再執行檢視效果 ]
在ie中的效果如圖：
在ff中的效果如圖：
同時對兩個元素應用向右的浮動基本保持了一致，但請注意方向性，第二個在左邊，第乙個在右邊。
對於其它頁面構成元素，浮動的原理基本是一樣的，大家多動手測試，才能有更進一下的認識。學習css就是多動手，多寫**，必有收穫！
css學習 div css布局
1 布局 盒子布局 盒子模型 標準流 脫離文件流 標準文件流 塊級獨佔一行 行內塊和行內元素都是和其他共佔一行，在盒子中的元素遵循標準流從左到右從上到下排列，超過父元素時會溢位。一行行看 浮動 標準流配合使用 版心 width margin 0 auto ul li 標題 段落 a img dl d...
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
css浮動布局
清除浮動 形狀浮動 使用浮動可以控制相鄰元素間的排列關係。float left 向左浮動 float right 向右浮動 float none 不浮動 沒有設定浮動的塊元素是獨佔一行的。浮動是對後面元素的影響，第二個元素設定浮動對第乙個元素沒有影響。表示第乙個元素div.first of type...