浮動的作用比較強大，常用於專案的橫向排列；
ok,先給乙個小例子；下面也會以這個小例子來講；先看html**：
charset="utf-8"/>
head>
class="boxall">
class="box1"
id="b">box1div>
class="box2"
id="b">box2div>
class="box3"
id="b">box3div>
div>
body>
html>
type="text/css">
.boxall
#b.box1
.box2
.box3
style>
結果很明顯：浮動之後三個塊元素橫向排列，但是浮動又會產生一些不美好的現象：如上圖，紅色邊框並沒有包含住三個塊；那麼浮動之後有哪些問題呢：
1：被浮動元素將會將層級抬高；抬高半個層級；
2：被浮動元素會脫離文件流；直接造成margin屬性失效；
3：被浮動元素之間是內聯的關係；
4：浮動之後，被浮動元素後面的元素無論是行內元素還是塊級元素都會直接補上空間，如果空間不夠將會換行；
ok，那麼為了解決這些問題，必須清除浮動；浮動清除之後橫向排列的效果會保持，但是會解決上述問題；所以研究浮動的清除非常重要；
我的總結有以下幾個方式：
1：通過新增空的div清除：
html**：
class="boxall">
class="box1"
id="b">box1div>
class="box2"
id="b">box2div>
class="box3"
id="b">box3div>
class="clear">div>
div>
css**
.clear
因為截圖不完整所以右側並未封閉；自行腦補；可以看到，紅色框已經把三個塊包含住了；這種方法較為常用，但是對ie6有問題；
2通過加高父級div元素的高度即可解決：
css樣式：
.boxall
因為截圖不完整所以右側並未封閉；自行腦補；這種方式是通過給父級div元素增加高度即可解決，高度至少要和被浮動元素一致；同樣這種方式任然有短板：如果你的專案要求不能固定高度，那這個方式就只能忍痛割棄了；
3：通過
的方式來解決：
html**：
class="boxall">
class="box1"
id="b">box1div>
class="box2"
id="b">box2div>
class="box3"
id="b">box3div>
class="all" />
div>
.all
可以看到這裡確實把浮動清除了；
4：通過inline-block來清除浮動
這種方式是通過給父級元素的display屬性新增inline-block屬性值來清除浮動效果；
css樣式：
.boxall
結果很明顯：浮動已經清除；紅色邊框已經把三個塊包含住；但是這種方式下margin左右auto失效；
5：通過給父級元素新增浮動樣式來清除浮動；
ok看一下css樣式：
.boxall
很明顯，浮動已經被清除了；但是這種方式就是魚死網破的方式；為什麼這麼說呢？
因為你給被浮動元素的父級新增了浮動，那麼父級的父級也必須新增浮動，最後導致整個html文件都處於浮動的狀態；所以這種方式很不推薦；
6：通過after偽類來清除浮動：
還是先看一下css樣式：
.boxclear
:after
class="box boxclear">
class="box1"
id="b">box1div>
class="box2"
id="b">box2div>
class="box3"
id="b">box3div>
div>
結果：
.boxclear
清除浮動css詳解
css定位position static relative abslute fixed 1.relative相對定位 s1 內容一 special class s1 內容一 class s1 內容一 class s1 內容一 class s1 內容一 class s1 內容一 view code l...
CSS清除浮動的方法詳解
清除浮動方法 方法一 使用帶clear屬性的空元素 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。css code複製內容到剪貼簿 xml html code複製內容到剪貼簿 優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...