要注意以下幾點：
1、 浮動元素會被自動設定成塊級元素，相當於給元素設定了display:block（塊級元素能設定寬和高，而行內元素則不可以）。
2、 浮動元素後邊的非浮動元素顯示問題。
3、 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。
4、子元素全為浮動元素的元素高度自適應問題。
以下詳細分析四個問題。
一、浮動元素自動變塊級元素
首先說說塊級元素和行內元素區別，簡單的來說，塊級元素獨佔一行，可以設定寬高以及邊距，行內元素不會獨佔一行，設定寬高行距等不會起效。常見的塊級元素有：h1~h6、p、div、ul、table，常見的行內元素有：span、a、input、select等。
示例**：
<div
style
="height: 200px; width: 200px;"
>
<
span
style
="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;
border: solid 1px red; background-color: olive;"
>浮動元素span
span
>
div>
<
div
style
="height: 200px; width: 200px;"
>
<
span
style
="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;
background-color: olive;"
>非
浮動元素span
二、浮動元素後的非浮動元素問題
浮動元素後邊的元素若是非浮動行內元素且因為定位產生重疊時，行內元素邊框、背景和內容都在該浮動元素「之上」顯示，若是非浮動塊級元素跟在浮動元素後邊且在定位後產生重疊時，該塊級元素邊框和背景在該浮動元素「之下」顯示，只有內容在浮動元素不在浮動元素「之下」顯示。
示例**如下：
<div
style
="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;"
>
<
div
style
="float: left; width: 250px; height: 250px; border: solid 1px aqua; background-color: gray;
margin: 10px 0 0 10px;"
>
浮動div
div>
<
div
style
="background-color: red; border: solid 1px green; width: 300px; height: 150px;"
>
跟在浮動元素後邊的div
div>
<
span
style
="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;"
>
跟在浮動元素後邊的span
從圖中可以看出來，跟在浮動div後邊的div背景以及邊框被壓在了底下，內容卻沒有，span整體都在浮動div之上顯示。
不過在ie6這個效果卻很怪異，如圖：
浮動元素沒有壓在非浮動div之上，反而把span壓住了。
三、多個並列同方向浮動元素高度不一致問題
多個同方向浮動元素若是高度不一致的話，很可能會得到意外的效果，跟你想要的布局差別很大。多個同方向浮動元素一般是按照流式布局，一行滿了則自動換行，也就是類似於以下效果：
但各個浮動元素高度不一致的話效果很可能出現下邊的情況：
很意外吧，主要排列到元素7的時候，一行已經顯示不下了，所以要換行，但此處換行並不是從行頭開始，而是從元素5那開始，因為元素5比元素6高很多導致。
四、子元素全為浮動元素高度自適應問題
由於元素浮動後脫離了文件流，所以父元素是無法根據元素來自適應的。解決此問題最常用的辦法由兩種，第一種就是在所有浮動元素後加:
第二種辦法，使用萬能clear：
.clearfix:after然後在你需要自適應的元素上加上class=」 clearfix」即可。詳細請參考：* html .clearfix
*:first-child + html .clearfix
你真的理解clear：both嗎
在開發中，從美工mm給你html**中，肯定能經常看」
」這樣的**，但是你真的能明白它是做什麼用的嗎？
如：
<你可以將此部分**放到乙個html頁面看看效果，然後在去掉」div
style
="border:2px solid red;"
>
<
div
style
="float:left;width:80px;height:80px;border:1px solid blue;"
>test div
div>
<
div
style
="clear:both;"
>
div>
div>
」看一下效果,就知道這句話的作用了。
如圖：
（1）有clear:both的：
（2）無clear:both的
這樣看，應該就一目了然了：原來後邊的clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設定成浮動之後，就會發現，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限於一條線。
但這種辦法就是最好了的嗎？
我這麼說，當然答案就不是了。可以採用通過hack實現：
<看完解決辦法，咱們來看裡邊的原理：style
>
.clearfix:after
* html .clearfix
*:first-child + html .clearfix
style
>
<
div
class
="clearfix"
style
="border: 2px solid red;"
>
<
div
style
="float: left; width: 80px; height: 80px; border: 1px solid blue;"
>
test div
div>
div>
（1）、首先是利用:after這個偽類來相容ff、chrome等支援標準的瀏覽器。
:after偽類ie不支援，它用來和content屬性一起使用設定在物件後的內容，例如：
a:after
這個css將會讓a標籤內的文字後邊加上link文字文字。
（2）、利用「* html」這個只有ie6認識的選擇符，設定縮放屬性「zoom: 1;」實現相容ie6。
（3）、利用「*:first-child + html」這個只有ie7認識的選擇符，設定縮放屬性「zoom: 1;」實現相容ie7。
合理應用,正確理解CSS的float浮動屬性
首先我們了解到，css網頁布局的原理，就是按照html 中物件宣告的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技術，在html中的所有物件，預設分為兩種 塊元素 block element 內聯元素 inline element 雖然也存在著可變元素，但只是隨上下文關係確定該元...
正確理解CSS中的margin合併
最近在學習很多開發過程中容易忽悠但是又很重要的知識點，很多時候用的少不代表它不重要，這裡將它們寫出來以記錄，如果有寫的不好的地方請指正。margin合併是指塊級元素的上外邊距與下外邊距有時會合併為單個外邊距，有兩點需要理解。1.在塊級元素中，不包括浮動和絕對定位元素 2.只發生在和當前文件流方向的相...
對css浮動的理解以及清除浮動
首先我們要了解什麼是浮動，在css中浮動就是使元素及元素內容脫離文件流，並且使其移動到其父元素的最左或最右邊。移動到其父元素的最左或最右邊 是指向左或向右移動直至碰到另乙個浮動元素或是父元素的邊界 不包括padding 如何清除浮動？通常我們最普遍的作法是直接清除浮動 clear both 但是這樣...