1、浮動產生的原因是什麼呢
浮動是什麼情況呢？一般是一個盒子裏使用了CSS float浮動屬性，浮動的元素已經脫離了文檔流，導致父級對象盒子不能被撐開，這樣子CSS 浮動就產生了。
2、浮動產生負作用
由於浮動產生，如果對父級設置了樣式（如： background、border等），而父級不能被撐開，所以導致樣式不能顯示。還有margin padding設置值不能正確顯示，由於浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。
<div class="father">
<div class="left">left</div>
<div class="right">right</div>
</div><pre name="code" class="css"><style type="text/css">
.father { width: 500px;height: auto;border: 4px solid #F31E1E;padding:4px; }
.left { float: left;width: 200px;height:150px;border: 2px solid #9DE41C; }
.right { float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
</style>
由於子div元素都設置了浮動屬性，導致父元素的高度不能撐開。
3、清除浮動的方法
a.給父元素設置固定高度
<style type="text/css">
.father { width: 500px;height: auto;border: 4px solid #F31E1E;padding:4px; }
.left { float: left;width: 200px;height:150px;border: 2px solid #9DE41C; }
.right { float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
</style>
b.給父元素添加overflow屬性，給父元素添加了overflow:hidden即可實現清除浮動的效果，當然overflow:auto也是可以的。
優點是比較簡單，缺點是父元素設置固定的高度或者寬度的話可能會隱藏子元素，或者出現滾動條，影響佈局.
</pre><pre name="code" class="css"><style type="text/css">
.father{positon:relative;top:200px;left:300px;width: 500px;height: auto;border: 4px solid #F31E1E; padding: 4 px;overflow: hidden;}
.left{float: left;width: 200px;height:150px;border: 2px solid #9DE41C; }
.right{float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
</style>
c.使用僞類before和after:
<style type="text/css">
.father{positon:relative;top:200px;left:300px;width: 500px;height: auto;border: 4px solid #F31E1E; padding: 4px;}
.father:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.left{float: left;width: 200px;height:150px;border: 2px solid #9DE41C; }
.right{float: right;width: 200px;height: 150px;border: 2px solid #EEE818;}
</style>
這種辦法就比較好了，沒有添加任何額外的HTML標籤，又不會影響頁面佈局.
