HTML5高階之css清除float浮動
我們先來回憶一下float的特徵：
1）塊在一排顯示
2）內聯支援寬高
3）預設內容撐開寬度
4）脫離文件流
5）提升層級半層
由於float浮動脫離文件流，那麼就很容易產生各種相容性和由於浮動產生的視覺效果上的差別。接下來我們分析幾種主要的解決方法。大家最熟悉的方法應該就是新增空標籤，然後利用clear來清除浮動，其實方法很多，但是不是每種都適合我們所遇到的情況，也不是每種都能很好的相容所有瀏覽器，所以需要選擇適當的方法去解決這個由於浮動所產生的問題。
一、下面幾個是計較傳統的幾種清浮動的方法，但是在目前的使用中還是有些問題
1、加高度 (擴充套件性不好)
如果是通過加高度進行清浮動的話，那麼就意味著在設計的過程中，高度是固定的，這樣就無法自適應那些需要自適應高度的情況，擴充套件性不好。
比如：
顯示結果如下，外面的div無法包住裡面的div，如果通過給外面的div新增高度的話，就意味著裡面的內容無法自適應高度，這樣的話，擴充套件性不好。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ border: 1px solid red; } .item{ width: 200px; height: 200px; background-color: green; float: left; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
2、給父級加浮動 (頁面中所有元素都加浮動，margin左右自動失效（floats bad ！）)3 、.inline-block 清浮動方法 (margin左右auto失效)
4、空標籤清除浮動 (IE6 最小高度 19px；（解決後IE6下還有2px偏差）)
5、.br清浮動(不符合工作中：結構、樣式、行為，三者分離的要求)
即新增下面這條語句在裡面的div後面：<br clear="all" />
二、目前常用的三種清浮動方法，也是比較有效的方法
先拋一塊問題磚（display： block）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 1px solid #ccc;
background: #c2ffe3;
color: #fff;
margin: 50px auto;
padding: 50px;
}
.div1{
width: 80px;
height: 80px;
background: red;
float: left;
}
.div2{
width: 80px;
height: 80px;
background: blue;
float: left;
}
.div3{
width: 80px;
height: 80px;
background: sienna;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>我們本意是想讓三個div靠左顯示，並且是在第一個div中，但是現在的效果是邊框沒有被撐開，margin值不能正常顯示。所以可以採用以下幾種方法進行解決。
1、新增新的元素 、應用 clear：both；
html：
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>css:
.clear{clear:both; height: 0; line-height: 0; font-size: 0} .box{
border: 1px solid #ccc;
background: #c2ffe3;
color: #fff;
margin: 50px auto;
padding: 50px;
overflow: auto;
zoom: 1;//zoom 相容IE6 IE7，處理相容性問題
}3、據說是現在主流的方法 :after 方法：（注意：作用於浮動元素的父親）
原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而box利用其偽類clear:after在元素內部增加一個類似於div.clear的效果。
html:
<div class="box clearfix">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>.clearfix{
*zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}:after{content"新增的內容";} IE6，7下不相容
2）zoom 縮放
a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。
b、FF 不支援；
其中clear:both;指清除所有浮動；content: '.'; display:block;對於FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。
最終的效果圖：
