上述這就是我們對于CSS中的浮動的最初步的認識了。下面我就對float進行了一些簡單的研究。

有幾點需要注意：

1、 浮動元素會被自動設置成塊級元素，相當于給元素設置了 display:block （塊級元素能設置寬和高，而行內元素則不可以）。

2、 浮動元素后邊的非浮動元素顯示問題。

3、 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。

4 、子元素全為浮動元素的元素高度自適應問題。

定義為float以后，將自動變為塊級元素

塊級元素和行內元素區別：

簡單的來說，塊級元素獨占一行，可以設置寬高以及邊距；行內元素不會獨占一行，設置寬高行距等不會起效。

常見的塊級元素有： h1~h6 、 p 、 div 、 ul 、 table ；

常見的行內元素有： span 、 a 、 input 、 select 等。

浮動元素后的非浮動元素問題

測試代碼： 浮動DIV 跟在浮動元素(塊元素)后邊的DIV 跟在浮動元素(行內元素)后邊的span 結果：

結果如上圖所示。
緊跟在浮動 div 后邊的 div 背景以及邊框被壓在了底下，內容卻沒有；而 span 整體都在浮動 div 之上顯示。 但是，并非在所有情況下都是這樣。這里我們不得不考慮一下瀏覽器的兼容性問題,尤其是在天朝IE6依舊泛濫的大形勢之下 :)
上述代碼在IE6下面展現時：浮動元素沒有壓在非浮動
div之上，反而把span壓住了。 
http://www.cnblogs.com/roucheng/

多個并列，同向，浮動的元素的高度不一致問題

多個同方向浮動元素若是高度不一致的話，很可能會得到意外的效果，跟你想要的布局差別很大。

多個同方向浮動元素一般是按照流式布局，一行滿了則自動換行。理論效果類似于下圖：

上述情況往往就是我們所期望得到的結果。

但是，通常我們的結果也會是這樣：

很多時候，在我們不經意間就會出現類似意外。

排列到元素 7 的時候，一行已經顯示不下了，所以要換行，但此處換行并不是從行頭開始，而是從元素 5 那開始，因為元素 5 比元素 6 高很多導致。

子元素全為浮動元素高度自適應問題

由于元素浮動后脫離了文檔流，所以父元素是無法根據元素來自適應的。

此問題最常用的辦法由兩種：

第一種就是在所有浮動元素后加：

< div style =" clear :both ;height :0px ;">

第二種辦法，使用萬能 clear ：

.clearfix:after

{

visibility : hidden ;

display : block ;

font-size : 0 ;

content : "." ;

clear : both ;

height : 0 ;

}

* html .clearfix

{

zoom : 1 ;

}

*:first-child + html .clearfix

{

zoom : 1 ;

}

然后在你需要自適應的元素上加上 class=” clearfix ” 即可 。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com