元素浮動以後可以想做或向右移動，直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流，所以文件的普通流中的框就變現的好像浮動元素不存在一樣。
浮動的好處：
這是乙個浮動的demo：
charset="utf-8">標籤，使用清除浮動title>
.parent
.fstyle>
head>
class="parent">
class="f">
div>
div>
body>
html>如圖：
-元素浮動在左側，父元素沒有被撐起來。
在解決浮動元素產生的問題中有很多方法，但是也有一些方法解決了問題以後又產生了新的問題，得不償失，我一般使用after偽元素來清楚浮動，不會產生別的問題。
1.新增額外標籤清除浮動。
div>
//新增額外標籤並且新增clear屬性
div>
div>優點：通俗易懂，容易掌握。
缺點：新增了無意義的空標籤，後期不好維護。
2.新增
標籤本身的的clear屬性
div>
//使用br標籤本身的clear屬性
clear="all">
div>優點：通俗易懂，容易掌握。
缺點：新增了無意義的空標籤，後期不好維護。
3.父元素設定overflow:hidden
//將父元素的overflow設定為hidden
div>
div>4.父元素設定overflow:auto
//將父元素的overflow設定為auto
div>
div>5.父元素也設定成浮動元素
//將父元素也設定成浮動元素
div>
div>6.父元素設定display:table
//將父元素設定display:table
div>
div>7.使用偽元素:after（推薦使用）
//在css中新增:after偽元素.parent:after
class="parent">
class="f">
div>
div>優點：結構和語義正確，沒有多餘的標籤，一般不會產生新的問題。
缺點：復用方式不當會造成**量增多。
清除浮動方法及優缺點
方法1 給父級div定義 高度 如下 我是左浮動 我是右浮動 我是div2 原理 通過設定父元素overflow值設定為hidden 在ie6中還需要觸發 haslayout zoom 1 優點 簡介，不存在結構和語義化問題 缺點 無法顯示需要溢位的元素 亦不太推薦使用 方法7父元素設定 overf...
清除浮動的方法及優缺點
為什麼要清除浮動？下面的例子是浮動對元素的影響 lang en charset utf 8 type text css box1 box2 box3 style head class box1 class box2 p div class box3 div body html box2加入float...
浮動布局的優缺點，清除浮動有哪些方式？
當元素浮動以後可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流，所以文件的普通流中的框就變現的好像浮動元素不存在一樣。這樣做的優點就是在 混排的時候可以很好的使文字環繞在周圍。另外當元素浮動了起來之後，它有著塊級元素的一些性質例如可以設定...