一、浮動元素自動變塊級元素 非浮動元素占據浮動元素位置，浮動元素不能占據非浮動元素位置？？？向上占據 浮動元素會被自動設置成塊級元素，相當於給元素設置了display:block（塊級元素能設置寬和高，而行內元素則不可以）。 二、併列關係的盒子，不一致地浮動，位置問題 元素浮動會對後面非浮動的兄弟元 ...
一、浮動元素自動變塊級元素
非浮動元素占據浮動元素位置，浮動元素不能占據非浮動元素位置？？？向上占據
浮動元素會被自動設置成塊級元素，相當於給元素設置了display:block（塊級元素能設置寬和高，而行內元素則不可以）。
<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</span>
</div> 
二、併列關係的盒子，不一致地浮動，位置問題
元素浮動會對後面非浮動的兄弟元素產生影響
可能情況
- 後邊若是非浮動行內元素，且因為定位產生重疊時，行內盒子模型壓在該浮動元素之上
- 後邊若是非浮動塊級元素，且在定位後產生重疊時，該塊級的內容圍繞該浮動元素顯示，其他在該浮動元素底下
示例代碼如下：
<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; width: 300px; height: 150px;">
跟在浮動元素後邊的DIV
</div>
<span style="background-color: red; margin: 0 0 0 -50px;">
跟在浮動元素後邊的span
</span>
</div> 效果如下
不過在ie6這個效果卻很怪異，如圖：
浮動元素沒有壓在非浮動div之上，反而把span壓住了。
解決辦法
對被浮動影響的元素添加clear:both
三、併列關係的盒子，一致地同方向浮動，高度不一致問題
多個同方向浮動元素一般是按照流式佈局，一行滿了則自動換行，也就是類似於以下效果：
但各個浮動元素高度不一致的話效果很可能出現下邊的情況：
原因
主要排列到元素7的時候，一行已經顯示不下了，所以要換行，但此處換行並不是從行頭開始，而是從元素5那開始，因為元素5比元素6高很多導致。
四、包含關係的盒子，
可能情況
裡面盒子浮動，包住它的盒子不浮動時，父盒子背景無顯示
原因
由於元素浮動後脫離了文檔流，所以父元素是無法根據元素來自適應的。
解決辦法1 clear:both
用法
在所有浮動元素後加: <div style="clear:both;height:0px;"></div>
<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> 
原理
子元素浮動後，因為脫離文檔流，所以父元素包含不住，無法撐開。由於沒有現有的元素可以應用清理，所以我們只能添加一個空元素並且清理它。
解決辦法2 overflow
用法
<style>
.box{
background-color: yellow;
overflow:atuo; //或者是hidden，.box是父盒子
}
.box1{
width: 100px;
height: 100px;
background-color: green;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>
原理
在父元素上設置overflow這個屬性，如果父元素的這個屬性設置為auto或者是hidden，父元素就會擴展包含浮動，這個方法有著比較好的語義性，因為它不需要額外的元素，但是，要記住一點，overflow屬性不是為了清除浮動而定義的，要小心不要覆蓋住內容或者觸發了不需要的滾動條。
解決辦法3 clearfix類
用法
<style>
.clearfix:after{ content:""; display:table; height:0;
visibility:both; clear:both;}
.clearfix{*zoom:1; /* IE/7/6*/}
</style>
<body>
<div class="box clearfix">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>
</body>原理：
這種方式這樣理解，就是利用偽類元素，也就是在有浮動的標簽前面添加一個塊級元素，來達到效果。
