在清除浮動前我們要了解兩個重要的定義：
浮動的定義：使元素脫離文檔流，按照指定方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停了下來。
高度塌陷：浮動元素父元素高度自適應(yīng)（父元素不寫高度時，子元素寫了浮動后，父元素會發(fā)生高度塌陷）
知道浮動和為什么要清除浮動之后我們可以開始學(xué)習(xí)如何清除浮動了，這時候我們就需要用到清除浮動的屬性clear,
clear:left | right | both | none | inherit：元素的某個方向上不能有浮動元素
clear:both：在左右兩側(cè)均不允許浮動元素。
具體清楚浮動的方法主要一下幾種：
1、clear清除浮動（添加空div法）
在浮動元素下方添加空div,并給該元素寫css樣式：
{clear:both;height:0;overflow:hidden;}
2、方法：給浮動元素父級設(shè)置高度
我們知道了高度塌陷是應(yīng)為給浮動元素的父級高度是自適應(yīng)導(dǎo)致的，那么我們給它的設(shè)置適當?shù)母叨染涂梢越鉀Q這個問題了。
缺點：在浮動元素高度不確定的時候不適用
3、方法：以浮制浮（父級同時浮動）
何謂“以浮制浮”呢？就是**讓浮動元素的父級也浮動**。
缺點：需要給每個浮動元素父級添加浮動，浮動多了容易出現(xiàn)問題。
4、方法：父級設(shè)置成inline-block
缺點：父級的margin左右auto失效，無法使用margin: 0 auto;居中了
5、 br 清浮動
<div class="box">
<div class="top"></div>
<br clear="both" />
</div>
br 標簽自帶clear屬性，將它設(shè)置成both其實和添加空div原理是一樣的。
問題：不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求。
6、給父級添加overflow:hidden 清浮動方法；
問題：需要配合 寬度 或者 zoom 兼容IE6 IE7；
overflow: hidden; *zoom: 1;
7、萬能清除法 after偽類 清浮動（現(xiàn)在主流方法，推薦使用）
選擇符:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
同時為了兼容 IE6，7 同樣需要配合zoom使用例如：
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}
需要注意的東西：
after偽類： 元素內(nèi)部末尾添加內(nèi)容；
:after{content"添加的內(nèi)容";} IE6，7下不兼容
zoom 縮放
a、觸發(fā) IE下 haslayout，使元素根據(jù)自身內(nèi)容計算寬高。 b、FF 不支持；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。